Prototype
技能 活跃Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
To rapidly validate design choices through throwaway prototypes, saving time and effort before committing to full implementation.
功能
- Generate logic prototypes via terminal app
- Generate UI prototypes with switchable variations
- Guide design validation before implementation
- Integrate with project's existing tooling and runtime
使用场景
- When wanting to prototype a new feature or design.
- When needing to sanity-check a data model or state machine.
- When exploring different UI variations for a component or page.
- When a user asks to 'prototype this' or 'try a few designs'.
非目标
- Producing production-ready code directly.
- Including tests or extensive error handling in the prototype.
- Persisting state by default.
- Leaving prototypes in the repository after the design question is answered.
Practical Utility
- warning:Production readinessThe skill describes a process for creating prototypes, but the output is inherently throwaway and not intended for production, and does not cover the complete lifecycle beyond the prototype's lifespan.
- info:Usage examplesWhile the skill provides detailed instructions on how to structure prototypes, it lacks concrete, ready-to-use end-to-end examples demonstrating invocation and observable outcomes for its core capabilities.
安装
/plugin install skills@mattpocock-skills质量评分
类似扩展
Design Workflow
100Anti-AI-generic design guidelines. Use when creating UI prototypes, reviewing designs for generic AI patterns, or setting up a project design system.
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
Microinteractions
99Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "interaction polish", "state transitions", or "input feedback". Also trigger when designing form validation responses, progress indicators, confirmation dialogs, or any UI element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.