skills.rest
dgk-dev
dgk-devCOMMUNITY
Explore all skills by this author →
GitHub

fd

Enforce design-system constraints and UI polish in AI-assisted frontend workflows.

52|12|Updated Mar 11, 2026
Search Tags:#workflow#design#ui#frontend#ux#polish
One-click install
npx skills add https://github.com/dgk-dev/dgk-gpt --skill fd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fd
Source: https://github.com/dgk-dev/dgk-gpt/tree/main/skills/fd
Command: npx skills add https://github.com/dgk-dev/dgk-gpt --skill fd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

FD provides a design-first workflow that ensures strong visual direction, consistent UI polish, and alignment with a design system during AI-assisted frontend work.

Core Features & Use Cases

  • Claude-First Mode: Use Claude to handle the initial design pass and prompt integration, followed by Codex-based refinement.
  • Post-Claude Audit: Review diffs, fix layout, spacing, accessibility, and integration with the existing system.
  • Default Taste: Bias toward clarity and restraint in UI, typography, and hierarchy.
  • Core Rule: Pick a single clear design direction and stay consistent.
  • First Pass / Adjust To The Surface / Design Direction: Steps to plan, apply, and refine the surface.
  • Execution Rules / Shadcn Mode / New Surface Priority: Rules for integration with existing system and component patterns, especially when using shadcn-based stacks.
  • Avoid / Implementation Guidance / Verification / Finish: Guardrails and verification steps to ensure quality.

Quick Start

Start a design pass for the current UI using the default fd workflow.

Frequently Asked Questions about fd

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

FAQPage Schema
How do I improve frontend UI polish during AI-assisted development?▼

To improve frontend UI polish during AI-assisted development, apply a design-first workflow that enforces visual direction, consistency, and accessibility checks across UI components and responsive states.

What is the best way to maintain a consistent design direction with Claude and Codex?▼

The best way to maintain consistent design direction is using a Claude-First Mode for the initial design pass, followed by Codex-based refinement to audit diffs, fix layouts, and ensure spacing aligns with existing tokens.

Can I use this workflow to audit UI accessibility and layout after an AI generation pass?▼

Yes, you can use this workflow to audit UI accessibility and layout. The Post-Claude Audit step specifically reviews diffs to fix layout, spacing, accessibility, and integration with the existing design system.

Does this UI polish workflow integrate with shadcn component patterns and design tokens?▼

Yes, this UI polish workflow integrates with shadcn component patterns and design tokens. Shadcn Mode enforces execution rules for integrating new surfaces with existing system layouts and component patterns.

Why does my AI-generated frontend UI lack visual hierarchy and consistent styling?▼

AI-generated frontend UI lacks visual hierarchy because it misses a single clear design direction. Applying a structured workflow biases the output toward clarity, restraint, and consistent integration with design tokens.

Do I need existing design tokens to enforce UI polish in AI-assisted workflows?▼

You need existing design tokens to properly enforce UI polish in AI-assisted workflows. The verification steps review integration with existing tokens, layouts, and accessibility checks to ensure consistent system alignment.

Related Skills

Explore More Design & Creative Skills→
GrizzwaldHouseGrizzwaldHouse
6

Notion & Figma Integration

Synchronize design components, tokens, and project pages between Notion and Figma.

Community
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
rogvidrogvid

king-mode

Provides UI/UX architectural guidance for designing scalable frontend systems and crafting sprint-ready plans.

Community
Advanced