skills.rest
hdtinh57
hdtinh57COMMUNITY
Explore all skills by this author →
GitHub

design

Design user flows and interaction specs grounded in PRD personas and design system.

1|Updated Apr 23, 2026
Search Tags:#design#accessibility#prototyping#ux#design-system#wireframe
One-click install
npx skills add https://github.com/hdtinh57/codex-orchestrated-project-template --skill design-hdtinh57
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/hdtinh57/codex-orchestrated-project-template/tree/main/.codex/skills/design
Command: npx skills add https://github.com/hdtinh57/codex-orchestrated-project-template --skill design-hdtinh57

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when designing new user flows before implementation, creating component or interaction specifications, making design system decisions, evaluating accessibility compliance, or when a feature needs wireframing before the frontend developer starts building.

Core Features & Use Cases

  • Ground in user personas by referencing the relevant persona(s) in PRD.md before decisions.
  • Define the user goal, map task flows, interactions, and components; review existing design system in DESIGN_SYSTEM.md and reuse tokens and patterns where possible.
  • Provide comprehensive written specs that guide implementation while preserving design-system coherence.

Quick Start

Draft a wireframe outline for the onboarding flow grounded in the project's PRD personas.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create user flows and interaction specs before frontend implementation?▼

To create user flows and interaction specs, define the user goal, map task flows, and ground decisions in PRD.md personas while reusing existing DESIGN_SYSTEM.md tokens to guide implementation.

How do I evaluate accessibility compliance during wireframe creation?▼

Evaluating accessibility compliance involves mapping task flows and component interactions, checking alignment with the design system, and grounding decisions in established user personas before finalizing wireframe specifications.

What is the best way to design new features while maintaining design system coherence?▼

The best way to maintain design system coherence is to review existing patterns in DESIGN_SYSTEM.md, reuse available tokens, and output detailed interaction specs that align new feature flows with established component guidelines.

Can I draft a wireframe outline for an onboarding flow using project personas?▼

Yes, you can draft a wireframe outline for an onboarding flow by referencing relevant personas in PRD.md, mapping the required task interactions, and applying existing design system tokens to the component specifications.

Do I need a PRD and design system documentation to generate component specifications?▼

Yes, generating accurate component specifications requires grounding in PRD.md personas and reviewing DESIGN_SYSTEM.md to ensure interaction specs properly align with existing tokens and reuse established design patterns.

When should I not use automated design system documentation updates?▼

You should avoid automated design system documentation updates when lacking foundational grounding in PRD.md personas or when new component specifications cannot be properly validated against existing DESIGN_SYSTEM.md tokens and patterns.

Related Skills

Explore More Design & Creative Skills→
josipjelicjosipjelic
94

design

Generate implementation-ready design specifications grounded in user personas and design-system tokens.

Community
Advanced
thesaifalitaithesaifalitai
8

uiux-design

Convert design concepts into accessible, responsive Tailwind CSS components.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
MadAppGangMadAppGang
278

ui-implementer

Generate UI components from Figma URLs and validate against design fidelity.

Official
Advanced