디자인 스킬

Create a three-slide HTML presentation for company culture, strategy, or guiding principles. Burgundy, blush, and muted gold frame bold statements, pill-shaped tags, and eight principle cards, with button and keyboard navigation.

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

• Presenting company culture
• Sharing eight guiding principles
• Introducing a studio through tags

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

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

• Posters generated with programmed rules
• Still images that suggest motion
• Studies of artistic frame composition

Turn a design request into a concrete specification covering colors, fonts, layout, mood, spacing, and constraints. Generate DESIGN.md and an HTML preview, with a clear report of defaults applied to unspecified choices.

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

• Clarifying vague visual requirements before implementation
• Defining colors, fonts, and spacing for a landing page
• Reviewing design choices through an HTML preview

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

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

• Creating a fashion-inspired motion presentation
• Presenting a short story across three pages
• Applying existing brand rules to a dark editorial sequence

Extract colors, fonts, logos, imagery, and writing style from a live website. Turn measured page details into a structured brand kit, a written guide, and a reusable design system with visual previews.

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

• Document a website's colors, fonts, and logos
• Build a brand guide from a reference website
• Collect representative brand imagery

Create and manage DESIGN.md as a shared reference for design direction, reusable design values, and visual rules. This catalogue entry introduces the skill; its complete workflow requires installing the upstream bundle.

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

• Documenting a project's design direction
• Collecting reusable design values in one reference
• Managing visual rules in DESIGN.md

Create a brand overview image combining logo concepts, colors, typography, and examples across digital and physical materials. The skill bases the visual direction on the brand’s purpose and audience, arranging connected panels in a clear presentation grid.

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

• Presenting a new product’s visual identity
• Exploring logo concepts grounded in brand meaning
• Reviewing colors, typography, and application examples together

Generate 3D models from text descriptions or images through fal.ai for game assets, augmented reality previews, product mockups, and concept sculpting. This catalog entry points agents toward the upstream bundle needed for the full workflow.

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

• Generating 3D assets for a game
• Creating models for augmented reality previews
• Making product mockups

Build a design system, a shared set of design rules, from scratch and create realistic product mockups. Use it for kickoff workshops or new brand development, with room to explore bolder creative choices.

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

• Developing a new brand from scratch
• Running a design kickoff workshop
• Building a design system from the ground up

Turn rough ideas into developed designs through structured questions and exploration of alternatives. Use it early in concept work to clarify an initial idea, consider different directions, and shape a more concrete design.

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

• Developing a rough idea into a concrete design
• Exploring alternative directions for a concept
• Clarifying an idea through structured questions

Polish an existing web interface with subtle button feedback, state transitions, and page reveals. Preserve the layout and content, keep animation timing consistent, and provide alternatives for people who prefer reduced motion.

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

• Adding hover and press feedback to buttons
• Clarifying changes between interface states
• Introducing primary content with subtle motion

Review a design against Dieter Rams' ten principles using evidence from code, screenshots, copy, and measurements. Receive a scorecard, a verdict on whether to create, refine, or redesign, and a prompt for planning the next steps.

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

• Audit a UI against Dieter Rams' ten principles
• Decide whether to refine or redesign a screen
• Check interface wording and usability with evidence

Customize Ant Design colors, spacing, corners, and typography using design tokens, shared values that control appearance. Configure global styles, individual components, dark mode, and CSS variables through ConfigProvider, and extract computed theme values when needed.

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

• Matching interface colors and typography to a design
• Configuring a dark theme
• Adjusting the appearance of individual components

An older experimental skill for designing landing pages, portfolios, and redesigns around a brief and audience. Adjust layout variation, motion, and information density while applying contextual design rules, consistent styling, and accessible interaction states.

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

• Designing a landing page for a specific audience
• Creating a portfolio with controlled motion and density
• Redesigning a site around its existing brand

Create website reference images, inspect their text, spacing, colors, and layout, then build the frontend to match. Section-specific images guide landing pages, portfolios, and redesigns, with attention to readable content and uncluttered first screens.

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

• Building a landing page from generated design references
• Redesigning a portfolio website
• Refining a hero section for small laptop screens

Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.

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

• Maintaining the original v1 design behavior
• Building asymmetric React or Next.js interfaces
• Designing loading, empty, and error states

Generate mobile app screen images and connected screen flows for iOS, Android, or cross-platform concepts. The skill emphasizes readable text, consistent colors and components, logical navigation, and balanced phone mockup framing. It produces images only.

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

• Visualizing a mobile app concept across several screens
• Creating onboarding and authentication flow images
• Comparing mobile app redesign concepts

Generate a brand overview image that brings together logos, colors, typography, imagery, and application mockups. Develop a new visual identity or extend supplied brand assets into a coherent presentation board guided by the brand’s purpose and audience.

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

• Exploring the visual direction of a new brand
• Creating a presentation board from existing brand assets
• Comparing logo, color, and typography choices together

Generate separate horizontal design reference images for each section of a landing page or marketing website. It coordinates colors, typography, imagery, spacing, and action buttons while varying layouts to give developers a concrete visual guide.

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

• Creating visual references for every landing page section
• Exploring a minimalist or editorial hero design
• Coordinating colors and typography across website sections

Design and code restrained web interfaces using warm whites, charcoal text, contrasting typefaces, and generous spacing. Flat grids, muted pastel accents, and subtle interactions create an editorial feel, with motion settings that respect user preferences.

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

• Designing a calm, document-style web interface
• Organizing features in an asymmetrical grid
• Unifying the appearance of buttons, FAQs, and shortcuts

Generate a DESIGN.md file for Google Stitch that defines a shared visual direction. It pairs plain-language descriptions with exact colors, typography, component states, responsive rules, and motion guidance to keep generated screens consistent.

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

• Preparing shared design rules for Google Stitch
• Keeping colors and typography consistent across screens
• Documenting mobile layouts and touch target sizes

Design web interfaces inspired by industrial print and old military terminals. Use rigid grids, contrasting type sizes, restrained color, and simulated analog textures to shape data-heavy dashboards, portfolios, or editorial sites.

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

• Designing a dashboard with an industrial blueprint look
• Creating a portfolio with bold typography
• Styling an editorial site like printed technical manuals

Design, build, or refine public websites using researched layouts, typography, palettes, and imagery. It develops a concept from the subject, checks the page in a real browser at three widths, and guides revisions through screenshot reviews.

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

• Redesigning a landing page that looks generic
• Building a portfolio around a distinctive concept
• Checking typography and layout at three screen widths

Audit and refine existing websites or apps while preserving their functionality and technology choices. Improve typography, colors, spacing, navigation, and interaction states, including loading, empty, and error screens, through focused changes rather than a full rebuild.

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

• Refining a website with a generic AI-generated look
• Improving typography, colors, and spacing
• Adding loading, empty, and error states