디자인 스킬

Audit how a product uses design tokens, shared settings for visual properties such as color and spacing. Identify hard-coded values, inconsistent usage, and missing tokens, then recommend replacements and prioritize migration work.

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

• Finding hard-coded colors and spacing values
• Checking duplicate or deprecated token usage
• Identifying gaps in existing design tokens

Document reusable design solutions for recurring user experience problems. Build entries that explain the problem, solution, structure, behavior, examples, accessibility considerations, and related patterns, giving teams a consistent way to share design knowledge.

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

• Document navigation design patterns
• Organize form behavior and error handling
• Share good examples and anti-patterns

Build a consistent process for reviewing design work from concept through implementation. Define checkpoints, review criteria, checklists, and approval steps, adapting the process to each project's size and risk.

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

• Standardizing design reviews across a team
• Preparing checklists before developer handoff
• Defining review responsibilities and approval steps

Structure a design presentation around its audience and the decision you need. Organize the problem, design journey, proposed solution, supporting evidence, and final request, with guidance on slide content and speaker notes.

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

• Sharing design progress with stakeholders
• Requesting focused feedback in a design review
• Presenting a final design for approval

Research real screens, user journeys, and interface elements from top-grossing mobile apps through Appllama MCP, an agent connection to its design library. Collect visual references and organize findings to guide new screens or improve existing ones.

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

• Research reference apps before designing a new mobile app
• Compare onboarding and paywall flows
• Find references for improving an existing screen

Design and implement mobile screens with Expo and React Native, using real apps as references. Refine platform-standard controls, navigation, themes, and motion, then inspect screenshots and flow recordings in a simulator to find and fix defects.

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

• Build new mobile screens and onboarding flows
• Refine navigation and back-button behavior
• Check dark mode and larger text layouts

Build a consistent visual system for an Expo app using shared colors, spacing, text styles, and reusable components. Extend the app’s existing theme and identify hardcoded values or component differences that make screens look inconsistent.

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

• Unify colors, spacing, and text styles across screens
• Create reusable buttons and other shared components
• Find hardcoded styles and visual inconsistencies

Build and review interfaces with purposeful animation, responsive button feedback, and consistent spacing and color. The skill guides motion choices by usage frequency and provides concrete code review suggestions with reasons for each change.

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

• Polishing button press and hover feedback
• Adjusting modal and drawer animations
• Reviewing UI code with reasons for each change

Review an existing screen or product using six weighted quality dimensions and Nielsen’s ten usability principles. Receive an overall score, a prioritized findings table, and concrete recommendations tied to shared design tokens, the named values used for styling.

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

• Review a screen before implementation
• Audit the quality of an existing product UI
• Prioritize usability and accessibility fixes

Build dashboards and trading screens with many metrics, charts, and sortable tables. The skill guides visual hierarchy, SVG graphics drawn without a chart library, numerical consistency, accessibility, dark themes, and layouts that adapt to smaller screens.

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

• Build an analytics dashboard around a leading metric
• Create trading screens with candlesticks and order books
• Combine charts and sortable tables in monitoring views

Critique a UI after automated checks pass, using a fresh review context. Inspect rendered screens and controls in desktop and mobile sizes, then produce an evidence-based verdict identifying design problems that warrant revision.

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

• Review visual quality after automated checks pass
• Inspect desktop and mobile layouts in both themes
• Find controls that fail to respond to interaction

Build a brand design foundation from a brief, covering color, typography, spacing, and motion. Generate reusable design tokens, named values shared across an interface, plus a single CSS theme with light and dark modes and contrast checks.

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

• Build a brand design foundation from scratch
• Define a new color palette and typography system
• Create shared tokens for light and dark themes

Keep Figma designs and code aligned by mapping shared design values to Figma Variables and choosing a sync direction. Check theme mappings and component variants, sizes, and interaction states to identify gaps between design and implementation.

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

• Publishing code-based design values to Figma
• Extracting Figma design values into code
• Mapping dark and brand themes to Figma Modes

Rebuild interfaces from screenshots or mockups by extracting colors, typography, spacing, and layout rules. Store those choices as reusable design values, create accessible components, and compare rendered screenshots with the reference.

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

• Build UI code from a screenshot
• Extract color, typography, and spacing rules from a mockup
• Check contrast in light and dark themes

Translate a desired visual style into design tokens, shared settings for colors, typography, spacing, and motion. Choose an archetype or one of 138 named design systems, apply its direction, and verify contrast and accessibility.

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

• Applying a visual direction that suits the audience
• Translating a named design system into shared settings
• Coordinating typography, spacing, corners, shadows, and motion

Create specifications for UI components such as buttons, inputs, and dialogs. Define structure, variants, sizes, interaction states, accessibility, and design tokens—shared values for colors and dimensions—so implementation follows a consistent reference.

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

• Define a button component before implementation
• Document input states and keyboard behavior
• Align component specifications with shared design tokens

Apply shared rules when building or reviewing interfaces, including consistent themes, meaningful color settings, mobile layouts, and interactive states. It defines automated checks and visual reviews so completion reports reflect measured results and clearly identify unverified work.

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

• Set shared design rules before building a screen
• Keep themes and action colors consistent across pages
• Check interactive states and mobile layouts

Write or review interface text for buttons, errors, empty screens, notifications, and labels. Match tone to the user's situation, explain problems and next steps clearly, and check wording for consistency, inclusion, character limits, and translation readiness.

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

• Writing button text that explains the outcome
• Improving errors with causes and next steps
• Adding a first action to empty screens

Turn an idea into progressively more detailed prototypes, starting with content and layout before visual design and code. Map user journeys, include error paths, and define usability test tasks and success criteria for each stage.

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

• Choose the prototype detail needed to answer a question
• Create wireframes to examine layout and navigation
• Map user journeys with decisions and error paths

Connect project design tokens, reusable visual settings, with external design systems. Map settings by their purpose, produce a correspondence table and migration plan, and verify color contrast, interface states, and dark mode across the mapped settings.

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

• Adopting an external design system's appearance
• Applying project tokens to an external component library
• Planning a screen-by-screen design system migration

Clarify a screen or component brief before building. Review existing project context, ask only questions that affect the work, and record assumptions, scope, content conditions, and completion criteria in a brief reviewers can check later.

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

• Clarifying requirements before building a screen
• Defining scope and completion criteria
• Recording assumptions for later review

Improve an existing website or app by auditing its design, prioritizing issues, and refining colors, typography, spacing, and interactive states. The workflow preserves existing behavior, unifies page themes, and includes accessibility and functional checks.

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

• Polish an existing website while preserving its features
• Unify colors and themes across multiple pages
• Prioritize UI issues before making design changes

Manage changes to a design system with version rules, contribution criteria, and deprecation plans. Classify updates by their impact, assess candidates for shared use, and document replacements, migration steps, and release changes.

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

• Choose a version bump for a design system change
• Assess a component or token for shared use
• Plan deprecation and migration to a replacement

Create, extend, or audit design tokens, reusable settings for colors, typography, spacing, and other visual properties. Organize them into three layers in DTCG JSON, check palette contrast, and validate file structure and references between tokens.

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

• Creating a color palette and type scale
• Organizing spacing, shadow, and radius settings
• Managing multiple brands and display densities