设计技能

Use when a design or set of requirements exists and work needs decomposing into tasks, before touching any code

中文简介正在准备中。当前显示原文说明。

Use when the user wants a small, well-bounded change done now without a plan file — a bugfix, config change, rename, doc update or simple refactor touching 1–5 files — 'corrigir rapidinho', 'quick fix no X', 'renomear Y'. Presents a mini-plan, implements after approval, verifies and commits. Do NOT use for more than 5 files, architectural decisions, migrations or new UI flows (use feat-feature / feat-backend / feat-frontend).

中文简介正在准备中。当前显示原文说明。

Discover and approve feature requirements through focused interviewing and repository research. Use when the user has a feature idea, unclear scope, conflicting requirements, or needs Flow context artifacts before design.

中文简介正在准备中。当前显示原文说明。

Design precise, production-grade enterprise UI — dashboards, admin panels, SaaS interfaces, and data-heavy applications. Use this skill for professional software interfaces that need Jony Ive-level craft: clean, minimal, functional, with intentional personality. Do NOT use for creative landing pages, marketing sites, or experimental/artistic frontends.

中文简介正在准备中。当前显示原文说明。

Escreve microcopy de interface — mensagens de erro, estados vazios, tooltips, rótulos de botão, onboarding e notificações. Use quando o usuário disser "UX writing", "microcopy", "mensagem de erro", "empty state", "texto do botão", "texto da interface", "onboarding do sistema".

中文简介正在准备中。当前显示原文说明。

Revisa e melhora copy existente através de 7 passes focados (clareza, voz, e daí, prove, especificidade, emoção, risco zero) somados à detecção determinística de padrões de escrita de IA. Use quando o usuário disser "revisar copy", "melhorar esse texto", "revisão", "está parecendo IA", "polir", "dar uma olhada nesse texto", "feedback de copy", ou logo após qualquer skill copy-* gerar um rascunho. Não reescreve do zero — aprimora preservando a mensagem central.

中文简介正在准备中。当前显示原文说明。

Transforma análise de desempenho em plano de ação priorizado por tiers — ganhos rápidos, mudanças estruturais, experimentos e o que parar de fazer. Use quando o usuário disser "o que eu faço agora", "como melhorar", "plano de ação", "por onde começo", "otimizar campanha", ou logo após perf-analyzer e perf-patterns. Fecha o ciclo: escrever → medir → aprender → escrever melhor.

中文简介正在准备中。当前显示原文说明。

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

中文简介正在准备中。当前显示原文说明。

Facilitate ideation, explore alternatives, and refine concepts through structured brainstorming techniques before implementation. Use when starting new projects, designing features, exploring solutions, evaluating tradeoffs, challenging assumptions, generating creative ideas, planning architecture, or refining rough concepts into detailed designs.

中文简介正在准备中。当前显示原文说明。

Design scalable, normalized database schemas with proper relationships, indexes, constraints, and migration strategies for relational and NoSQL databases. Use when designing database schemas, planning table relationships and foreign keys, creating indexes for query optimization, defining constraints and validations, designing data models for scalability, planning database migrations, choosing between SQL and NoSQL, implementing sharding strategies, optimizing query performance, or establishing data integrity rules.

中文简介正在准备中。当前显示原文说明。

Build beautiful, accessible UI components using shadcn/ui library with Radix UI primitives and Tailwind CSS styling that you own and can customize. Use when creating accessible component libraries, implementing common UI patterns (dialogs, dropdowns, tooltips), building forms with validation, creating data tables, implementing command palettes, using Radix UI primitives, customizing components with Tailwind, or building design systems with full ownership of code.

中文简介正在准备中。当前显示原文说明。

Create and maintain comprehensive brand guidelines including visual identity, tone of voice, messaging, color palettes, typography, and usage rules for consistent brand expression. Use when establishing brand identity, creating style guides, defining visual standards, setting tone of voice, creating brand assets, or ensuring brand consistency.

中文简介正在准备中。当前显示原文说明。

Design clean, scalable, and maintainable REST and GraphQL APIs following industry best practices. Use when designing public or internal APIs, planning endpoint structures, defining request/response contracts, establishing versioning strategies, implementing authentication patterns, designing data models, creating API documentation, ensuring consistent error handling, optimizing for performance, or establishing service contracts between microservices.

中文简介正在准备中。当前显示原文说明。

Create visual designs, graphics, and layouts using HTML Canvas API or design tools for data visualization, graphics, animations, and interactive visual content. Use when creating data visualizations, building interactive graphics, implementing drawing tools, creating charts and diagrams, building game graphics, implementing image manipulation, or creating dynamic visual content.

中文简介正在准备中。当前显示原文说明。

Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom themes, creating reusable utility patterns, configuring Tailwind theme extensions, implementing dark mode, building responsive layouts, creating design tokens, using arbitrary values, or establishing consistent spacing and typography scales.

中文简介正在准备中。当前显示原文说明。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

中文简介正在准备中。当前显示原文说明。

Use when asked to brainstorm, evaluate whether an idea is worth building, run office hours, or think through a new product idea or design direction before any code is written.

中文简介正在准备中。当前显示原文说明。

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode. For live site visual audits, use /design-review. Use when asked to "review the design plan" or "design critique". Proactively suggest when the user has a plan with UI/UX components that should be reviewed before implementation. (gstack)

中文简介正在准备中。当前显示原文说明。

Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. Standalone design exploration you can run anytime. Use when: "explore designs", "show me options", "design variants", "visual brainstorm", or "I don't like how this looks". Proactively suggest when the user describes a UI feature but hasn't seen what it could look like. (gstack)

中文简介正在准备中。当前显示原文说明。

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site. (gstack)

中文简介正在准备中。当前显示原文说明。

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

中文简介正在准备中。当前显示原文说明。

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview pages. Creates DESIGN.md as your project's design source of truth. For existing sites, use /plan-design-review to infer the system instead. Use when asked to "design system", "brand guidelines", or "create DESIGN.md". Proactively suggest when starting a new project's UI with no existing design system or DESIGN.md. (gstack)

中文简介正在准备中。当前显示原文说明。

YC Office Hours — two modes. Startup mode: six forcing questions that expose demand reality, status quo, desperate specificity, narrowest wedge, observation, and future-fit. Builder mode: design thinking brainstorming for side projects, hackathons, learning, and open source. Saves a design doc. Use when asked to "brainstorm this", "I have an idea", "help me think through this", "office hours", or "is this worth building". Proactively invoke this skill (do NOT answer directly) when the user describes a new product idea, asks whether something is worth building, wants to think through design decisions for something that doesn't exist yet, or is exploring a concept before any code is written. Use before /plan-ceo-review or /plan-eng-review. (gstack)

中文简介正在准备中。当前显示原文说明。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

中文简介正在准备中。当前显示原文说明。