use-design-system
Use Design System
Turn what the user points to into a coherent, editable system that another designer or agent can use to build the app consistently. Deliver the actual design artifact, with reusable foundations, component contracts, and examples in context. Scale the system to the product; a large component catalog is not evidence of quality.
Work in this order: understand the source, resolve important gaps, choose the destination page, establish foundations, prove a representative app pattern, expand component coverage, inspect the result, and hand it over. Fix shared decisions before multiplying specimens.
1. Understand the starting point
Resolve links, attachments, selected objects, paths, and phrases such as “this app” from the conversation. Inspect the referenced material before asking the user to describe information already available there.
| Starting point | Inspect and derive |
|---|---|
| Existing app or repo | Representative screens and flows, existing tokens/components, repeated visual rules, platform conventions, and inconsistencies. Read code without changing the app. |
| Design file or selected frame | Page structure, foundations, styles/variables, components, states, and existing system documentation. Reuse sound work. |
| Website or live reference | Rendered styles and relevant interactions; distinguish a source to preserve from inspiration to adapt. |
| Screenshots | Visible hierarchy, geometry, colors, type, and component families. Label estimates and proposed unseen states. |
| Product brief or idea | Users, primary tasks, target platform, content density, brand constraints, and the component families those tasks need. |
Write a short working brief: product and users, platforms/input methods, key flows, visual direction, required themes, source role, scope, and destination. It can live in your working notes and become the page's introduction; do not create a separate planning document unless useful or requested.