context_uiux_design
Manages UI/UX design documentation and principles.
Install
mkdir -p .claude/skills/context-uiux-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13026" && unzip -o skill.zip -d .claude/skills/context-uiux-design && rm skill.zipInstalls to .claude/skills/context-uiux-design
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when the user explicitly asks for 设计稿, 重做设计, UI/UX 设计方案, UI 设计师, UX 设计师, 视觉设计方案, 视觉专家, 交互设计方案, 界面设计方案, 页面设计方案, 原型设计, 线框图方案, 视觉规范, 设计系统方案, DESIGN.md, Impeccable review, UX designer, UI designer, frontend redesign, visual polish, or design system spec in a Minimal Context Harness project. Do not trigger for ordinary UI implementation, CSS tweaks, bug fixes, or generic mentions of 设计, design, or user experience.Key capabilities
- →Read global and area-specific context files
- →Create or update DESIGN.md based on user requests
- →Organize user flows, component lists, and interaction details
- →Perform product/page positioning checks for UI changes
- →Check UI controls against a control interaction framework
- →Identify existing visual issues using `npx impeccable detect`
How it works
The skill reads existing context and DESIGN.md, then organizes design conclusions into user flows, component lists, and interaction details. It performs checks for product positioning and UI control semantics.
Inputs & outputs
When to use context_uiux_design
- →Documenting design systems
- →Updating DESIGN.md
- →Defining UI/UX specs
- →Organizing design constraints
About context_uiux_design
Facilitates the documentation of design decisions, component lists, and interactions. It maintains consistent design documentation across projects, ensuring visual polish and design system integrity.
Use when the user explicitly asks for 设计稿, 重做设计, UI/UX 设计方案, UI 设计师, UX 设计师, 视觉设计方案, 视觉专家, 交互设计方案, 界面设计方案, 页面设计方案, 原型设计, 线框图方案, 视觉规范, 设计系统方案, DESIGN.md, Impeccable review, UX designer, UI designer, frontend redesign, visual polish, or design system spec in a Minimal Context Harness project. Do not t
When not to use it
- →Ordinary UI implementation tasks
- →CSS tweaks or bug fixes
- →Generic mentions of design or user experience
Limitations
- →Does not create `plan.md` or Task Contract files
- →Does not update Context for small code tasks or UI bug fixes
- →Does not generate independent UI/UX documents or handoff matrices
How it compares
This workflow systematically documents design decisions and visual specifications in structured files, unlike ad-hoc design changes.
Compared to similar skills
context_uiux_design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| context_uiux_design (this skill) | 0 | 3mo | No flags | Intermediate |
| brief | 0 | 5mo | No flags | Beginner |
| responsive-design-spec | 0 | 6mo | No flags | Advanced |
| ux-designer | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Seven128
View all by Seven128 →You might also like
brief
educlopez
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
responsive-design-spec
komunite
Create a responsive design spec with structured process, quality checks, and system integration
ux-designer
MYounesDev
|
prism-state-contract
AlexandreBrisebois
Mandatory state handling for the Visual Auditor. Manages snapshots and production assets.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.