Component Design
Copyright (c) 2026 KunAgent. Licensed under the MIT License.
Purpose
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
Tool routing
| Tool or skill |
Use |
design_system |
Create or apply project design tokens. |
design_validate |
Validate design-system usage. |
design_component |
Publish the component prototype. |
generate_image |
Create a needed local visual asset. |
Workflow
- Define hierarchy, content density, primary action, and states.
- Choose type, spacing, color, radius, and motion tokens before styling details.
- Design mobile and desktop layouts intentionally.
- Implement hover, focus, active, disabled, loading, empty, success, and error states as relevant.
- Validate contrast, semantics, motion, and responsiveness.
Completion gates
- Use one focal point and avoid nested-card clutter.
- Use color as reinforcement, not the only signal.
- Keep remote resource policy least-privilege.
Boundaries
- Do not depend on undocumented host CSS or runtime globals.
- Do not hide essential text in imagery or animation.
Delivery
Lead with the outcome, name the evidence used for verification, and disclose any real limitation that remains.
1---2name: component-design3description: Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.4---5
6# Component Design
7Copyright (c) 2026 KunAgent. Licensed under the MIT License.
8
9## Purpose
10Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
11
12## Tool routing
13| Tool or skill | Use |
14|---|---|
15| `design_system` | Create or apply project design tokens. |
16| `design_validate` | Validate design-system usage. |
17| `design_component` | Publish the component prototype. |
18| `generate_image` | Create a needed local visual asset. |
19
20## Workflow
211. Define hierarchy, content density, primary action, and states.
222. Choose type, spacing, color, radius, and motion tokens before styling details.
233. Design mobile and desktop layouts intentionally.
244. Implement hover, focus, active, disabled, loading, empty, success, and error states as relevant.
255. Validate contrast, semantics, motion, and responsiveness.
26
27## Completion gates
28- Use one focal point and avoid nested-card clutter.
29- Use color as reinforcement, not the only signal.
30- Keep remote resource policy least-privilege.
31
32## Boundaries
33- Do not depend on undocumented host CSS or runtime globals.
34- Do not hide essential text in imagery or animation.
35
36## Delivery
37Lead with the outcome, name the evidence used for verification, and disclose any real limitation that remains.
KunAgent