'layout' 검색 결과

Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prototyping a product landing page
• Creating a pricing comparison page
• Designing a documentation index

Create a pre-launch landing page with a brand logo, product message, and email signup form. Follow DESIGN.md for colors, fonts, and layout, producing a single HTML file with mobile layouts and form validation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create an email waitlist page before a product launch
• Build a signup page for beta participants
• Collect interest in an early access program

Create a single-page HTML poster with the feel of a newspaper essay. Oversized serif headlines, paper textures, six numbered sections, and annotated quotations organize substantial text into an editorial layout for opinions or launches.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Presenting a launch announcement as an editorial poster
• Turning a manifesto into a single-page layout
• Designing a newspaper-style essay poster

Build a single mobile app screen mockup in an iPhone 15 Pro frame. Choose from six layout types, apply the project's design settings, and produce HTML with device details such as the Dynamic Island and status icons.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Mocking up a feed or message list
• Exploring a profile or product detail screen
• Presenting a checkout or welcome screen

Review web interface code against Vercel's Web Interface Guidelines, covering layout, typography, color, motion, and accessibility. Receive concise findings with file names and line numbers, using a bundled guideline snapshot for a consistent review baseline.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing product interface code
• Checking accessibility against interface guidelines
• Checking layout, typography, color, and motion

Compare a PPTX exported from HTML with its source slides to find cropped text, footer overlaps, and lost styling. Identify shared causes, revise layout rules, and re-export the deck with automated checks for content extending beyond slide boundaries.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Check an HTML slide deck against its exported PPTX
• Fix cropped text and footer overlaps
• Investigate missing italics and unexpected fonts

Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a marketing page with distinctive typography
• Refining dashboard layouts and interaction states
• Adjusting layout density and animation intensity

Read, create, and adjust PowerPoint presentations, including slide layouts and templates. Use it for executive decks, training materials, and product reviews; the catalogue entry points agents to an upstream bundle containing the full workflow and supporting files.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a presentation for executives
• Prepare training slides
• Build a product review deck

Generate a DESIGN.md file for Google Stitch that defines colors, typography, layouts, component states, and motion. Clear descriptions and exact values give the screen-generation agent a shared reference, including explicit rules against generic design patterns.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Defining shared design rules for Google Stitch screens
• Documenting colors, typography, and component behavior
• Specifying mobile layouts and animation rules

Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a calm landing page with refined typography
• Designing an asymmetrical SaaS feature layout
• Building a portfolio with soft shadows and generous spacing

Design desktop landing page prototypes with varied layouts, large typography, dense grids, and GSAP animations tied to scrolling. Pages follow an attention-to-action structure, with explicit checks for heading length, grid completeness, and button text contrast.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prototyping a landing page with scroll animations
• Exploring varied hero layouts and typography
• Designing a compact grid without empty cells

Build a three-slide finance or strategy presentation with bold metric cards and a precise grid layout. A black, warm-paper, and neon-lime palette frames the data in one HTML file with button, keyboard, and dot navigation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Presenting financial metrics across three slides
• Creating a strategy deck with prominent numbers
• Replacing text and values in a consistent slide layout

Read, create, and edit .docx documents while paying attention to formatting and layout fidelity. Use it for Word document tasks where both the written content and its presentation need attention.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reading the contents of an existing .docx document
• Creating a Word document with formatting and layout
• Editing a document while preserving its presentation

Evaluate improvements to Archify diagrams using actual outputs and agent work records. Compare accuracy, readability, and total delivery time to investigate layout, connection routing, diagnostics, and authoring guidance, then document what the evidence supports.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Comparing diagram layouts and connection routes
• Investigating repeated diagram repair attempts
• Testing changes to authoring guidance

Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a landing page with a clear visual identity
• Refine a dashboard’s layout and typography
• Create React components with coordinated colors and motion

Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Planning the structure and appearance of a new interface
• Improving typography, spacing, and color in existing screens
• Reviewing accessibility and layouts across screen sizes

Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating layout differences between browsers
• Choosing a reset for a new site's styles
• Checking reset coverage in a CSS framework

Review images displayed at different screen sizes and help browsers select appropriately sized files. Check srcset image options, sizes display-width hints, and CSS layout together to identify oversized mobile downloads or mismatched image variants.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing responsive images in articles
• Reducing oversized image downloads on phones
• Checking image sizes in cards and galleries

Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating content jumps while images load
• Finding images missing width or height attributes
• Preserving image proportions in responsive layouts

Review styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing styles written directly in HTML
• Moving embedded styles into external stylesheets
• Checking exceptions for critical CSS and dynamic values

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking production CSS minification
• Adding minification to a build process
• Reviewing CSS output from PostCSS

Review the loading order of CSS and JavaScript to address rendering delays and flashes of unstyled content. Suggest changes to the document head, script loading, and critical styles, while checking layouts across screen sizes and interaction states.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating flashes of unstyled content
• Reviewing CSS and JavaScript order in the document head
• Checking deferred scripts and critical styles

Review CSS loading that delays a page’s first visible content. Help inline essential styles and defer other stylesheets, using preload and media conditions, while checking rendered layouts at different screen widths and interaction states.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating CSS that delays initial page display
• Separating essential styles from styles loaded later
• Reviewing preload and media-based stylesheet loading