メニュー
Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.
Build high-quality image generation and edit prompts from user intent using prompt structures proven across prompts.chat examples and OpenAI image prompting guidance.
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
| name | shape |
| description | Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. |
| version | 2.1.1 |
| user-invocable | true |
| argument-hint | [feature to shape] |
Load the impeccable skill first. It contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding. If design context is still missing, run the teach flow inside impeccable before continuing.
Shape the UX and UI for a feature before any code is written. This skill produces a design brief: a structured artifact that guides implementation through discovery, not guesswork.
Scope: Design planning only. This skill does NOT write code. It produces the thinking that makes code good.
Output: A design brief that can be handed off to the impeccable skill, Claude, or any other implementation skill.
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise.
Do NOT write any code or make any design decisions during this phase. Your only job is to understand the feature deeply enough to make excellent design decisions later.
Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. STOP and call the question tool to clarify.
After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete.
1. Feature Summary (2-3 sentences) What this is, who it's for, what it needs to accomplish.
2. Primary User Action The single most important thing a user should do or understand here.
3. Design Direction
How this should feel. What aesthetic approach fits. Reference the project's design context from .impeccable.md and explain how this feature should express it.
4. Layout Strategy High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS.
5. Key States List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel.
6. Interaction Model How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion?
7. Content Requirements What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges.
8. Recommended References Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features).
9. Open Questions Anything unresolved that the implementer should resolve during build.
STOP and call the question tool to clarify. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions.
Once confirmed, the brief is complete. The user can now hand it to the impeccable skill, Claude, or use it to guide any other implementation approach. If the same agent should continue into implementation immediately, switch into the build flow from impeccable/reference/craft.md.
