Skills
.Work. You
Rest

fd

Community

Frontend design mode for polished UI direction.

Design & Creative#workflow#design#ui#frontend#ux#polish
Authordgk-dev
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fd
Download link: https://github.com/dgk-dev/dgk-gpt/archive/main.zip#fd

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.