Agent Skills
› KunAgent/Kun
› component-design
component-design
GitHub指导Kun组件设计，涵盖视觉系统、响应式行为、交互状态及无障碍适配。通过定义层级、选择Token、实现多端布局与状态，确保组件一致性、可用性与合规性。
Trigger Scenarios
需要设计新的UI组件
优化现有组件的视觉与交互体验
检查组件是否符合设计规范
Install
npx skills add KunAgent/Kun --skill component-design -g -y
SKILL.md
Frontmatter
{
"name": "component-design",
"description": "Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components."
}
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.
Version History
- a984912 Current 2026-09-09 01:49
