skills.rest
joi-fairshare
joi-fairshareCOMMUNITY
Explore all skills by this author →
GitHub

design-refine

Dispatch Impeccable refinement commands to align UI with design tokens.

1|2|Updated Mar 19, 2026
Search Tags:#typography#design#ui#refinement#design-tokens#colorize#impeccable
One-click install
npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-refine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-refine
Source: https://github.com/joi-fairshare/agentic-workflow/tree/main/skills/design-refine
Command: npx skills add https://github.com/joi-fairshare/agentic-workflow --skill design-refine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures UI implementations stay faithful to the established design language by analyzing the current state, confirming token alignment, and dispatching Impeccable refinement commands when mismatches or polish opportunities arise.

Core Features & Use Cases

  • Design context validation: Loads .impeccable.md and design-tokens.json, warns if either is missing, and prepares the brand context so Impeccable commands have accurate guidance.
  • Refinement command dispatch: Suggests high-impact Impeccable commands when no argument is given, or directly invokes commands such as colorize, typeset, arrange, and polish when specified.
  • Token synchronization: After refinements run, scans modified files for new color, typography, or spacing values and prompts to update design-tokens.json, keeping implementation and tokens aligned.
  • Use Case: After generating a mockup, run this Skill to detect token drift, apply the right Impeccable polish pass, and ensure no ad-hoc styles slip into the codebase.

Quick Start

Ask design-refine to analyze the current implementation and suggest the most impactful Impeccable command.

Frequently Asked Questions about design-refine

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

FAQPage Schema
How do I keep UI typography and colors consistent with design tokens after mockup approval?▼

UI typography and color consistency is maintained by evaluating current assets against design-tokens.json and dispatching targeted refinement commands like colorize, typeset, or arrange to correct mismatches and align implementation with the brand design language.

What is design token synchronization and why is it needed for UI refinement?▼

Design token synchronization scans modified files for new color, typography, or spacing values after a UI refinement pass and prompts you to update design-tokens.json, preventing ad-hoc styles from slipping into the codebase and causing token drift.

Do I need an .impeccable.md file to polish UI details?▼

Yes, you need an existing .impeccable.md file and a design-tokens.json file to polish UI details effectively, as the workflow loads these files to prepare brand context and warns if either is missing before dispatching refinement commands.

How to choose the right refinement command for spacing or color mismatches?▼

Choosing the right refinement command for spacing or color mismatches involves analyzing the current implementation state to suggest high-impact commands, or directly invoking colorize for colors, typeset for typography, and arrange for spacing based on detected token drift.

What happens when new color or spacing values are introduced during UI polish?▼

When new color or spacing values are introduced during UI polish, the token synchronization mechanism scans modified files and prompts you to sync the new values back into design-tokens.json, ensuring implementation and design tokens remain aligned.

Related Skills

Explore More Design & Creative Skills→
joi-fairsharejoi-fairshare
1

design-analyze-ios

Extract iOS design tokens into W3C DTCG design-tokens.json from asset catalogs and Swift theme files.

Community
Intermediate
IsthisreelIsthisreel

Brand Design System

Enforce design tokens for color, typography, and spacing across UI components.

Community
Advanced
xbg-solutionsxbg-solutions

impeccable

Catalog 21 frontend design sub-skills for AI-assisted workflows.

Official
Advanced
InneiInnei
32

demo-ui-tokens

Manage color, spacing, and typography tokens for UI design systems.

Community
Basic