一键导入
ai-design-workflow
AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
WCAG conformance, BFSG compliance, semantic HTML, ARIA, keyboard navigation, contrast, forms, and assistive technologies. Defines binding rules for accessible web interfaces per WCAG 2.1 AA.
Design patterns for chat interfaces, agent UX, streaming UI, and tool visualization. Covers chat architecture, message types, streaming rendering, tool execution cards, and sandbox UI derived from 21st.dev Agents SDK documentation and templates.
Brand strategy, visual identity, positioning, corporate design, portfolio presentation, and consistent brand management across all digital touchpoints.
Color models, palettes, contrast, color psychology, color harmonies, and dark mode for web projects. Defines the 60-30-10 rule, semantic color coding, design tokens, and WCAG contrast requirements.
Modern UI component selection, composition, and theming patterns for web applications. Covers compound components, design tokens, variant systems, responsive patterns, and form architecture derived from 21st.dev SDK, Godly featured products, and current best practices.
Personas, touchpoint mapping, phase models, onboarding, customer retention, and data-driven journey analysis for user-centered web design.
| name | ai-design-workflow |
| description | AI tool integration into the design process, structured prompting for designers, creative AI usage with clear boundaries, and review workflows. |
AI is an assistant, not an autopilot. You retain control over direction, decisions, and quality. AI accelerates individual steps but replaces neither strategy nor judgment.
Use this skill when you:
You retain control. AI accelerates individual steps but replaces neither strategy nor judgment.
Define in advance which phases AI assists with and which it does not. Without a clear process, results are arbitrary.
The same principles that apply to a good client briefing apply to AI: context, role, task, format, tone.
AI interpolates between known patterns (combinatorial creativity). The deliberate break with conventions comes from the human.
Communicate openly where and how AI is used in the project. Concealed usage erodes trust.
No AI output goes into production unchecked. Every result undergoes a human review.
| Phase | AI Usage | Human Decides |
|---|---|---|
| Briefing | Analyze gaps and contradictions | Which questions are relevant |
| Research | Describe industry patterns, competition | Which insights are relevant |
| Personas | Sharpen assumptions, plausibility checks | Final persona definition |
| Concept | Moodboard variations, creative techniques | Which direction to pursue |
| Visual Design | Color palettes, font pairings, microcopy | Composition, consistency, final design |
| Review | Critical assessment, accessibility review | Whether feedback is implemented |
| Handoff | Documentation templates, style guide copy | Factual accuracy |
An effective prompt contains 5 elements:
At project kickoff: "Here is a project briefing for [project type]. Identify open questions, unclear requirements, and points that need to be clarified before starting." Result: Structured list of questions. See references/prompt-patterns.md for details and prompt templates.
Early concept phase: 1. Generate 15–20 variations with image generators, 2. Curate down to 2–3 directions, 3. Present as a decision-making basis.
For evolving existing ideas: AI examines an idea through each SCAMPER lens (Substitute, Combine, Adapt, Modify, Put to other use, Eliminate, Reverse).
For microcopy, button labels, error messages: 1. Describe context, tone, and function, 2. Generate 5 variations, 3. Select the best and refine.
After visual design, before handoff: 1. Describe the design in detail using words, 2. Request a critical assessment regarding clarity, accessibility, and consistency, 3. Use the response as a checklist.
During the handoff phase: Describe design decisions and have a structured documentation template generated. Framework produced in minutes instead of hours.
All projects look alike because the same tools are used with similar prompts. Solution: Treat AI output as raw material, never as the final product. Your own design signature must remain recognizable.
Spending hours crafting the perfect prompt instead of working iteratively. Solution: Start with an 80% prompt, refine in 2–3 iterations.
"The AI did it that way" as a justification. Solution: Every decision must be defensible by the designer.
Integrating every new AI feature immediately without evaluating its value. Solution: Evaluate in a test project before production use.
design-process — The AI workflow is an extension, not a replacement for the design processcustomer-journey — AI can accelerate persona development and touchpoint analysislanding-pages — AI-generated text and images must meet landing page standardswebsite-audit — AI tools can support website analysisbranding-identity — AI output must align with brand identity