skills.rest
FerroxLabs
FerroxLabsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ferrox-design-init

Generate a nine-section DESIGN.md design contract from repository context or UI evidence.

21|9|Updated Jul 21, 2026
Search Tags:#accessibility#frontend#design system#ui planning#design contract#interview workflow
One-click install
npx skills add https://github.com/FerroxLabs/ferrox-factory --skill ferrox-design-init
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ferrox-design-init
Source: https://github.com/FerroxLabs/ferrox-factory/tree/main/skills/ferrox-design-init
Command: npx skills add https://github.com/FerroxLabs/ferrox-factory --skill ferrox-design-init

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents UI work from drifting by turning the project’s visual decisions into a binding design contract before implementation begins.

Core Features & Use Cases

  • Design Contract Creation: Produces a DESIGN.md file with nine concrete sections covering theme, colors, typography, spacing, components, motion, voice, accessibility, and non-goals.
  • Interview or Existing-UI Modes: Can either guide a short recommendation-first interview or derive the contract from an existing codebase’s observed UI patterns.
  • Use Case: A team starting a new frontend feature can use this Skill to lock in consistent visual rules so designers, developers, and agents all build against the same standard.

Quick Start

Use the ferrox-design-init skill to create a DESIGN.md contract for this repository using the default interview flow.

Frequently Asked Questions about ferrox-design-init

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

FAQPage Schema
How do I create a UI design contract for a frontend project?▼

To create a UI design contract, this Skill generates a structured DESIGN.md file from your repository context, locking in visual rules across nine sections before implementation begins.

What is the best way to document a design system for agentic workflows?▼

Documenting a design system for agentic workflows requires an explicit design contract. This Skill produces a nine-section DESIGN.md with concrete values and accessibility safeguards so agents build against the same standard.

Can I generate a design contract from an existing codebase's UI patterns?▼

Yes, you can generate a design contract from an existing codebase. The Skill operates in existing-UI mode, deriving structured visual rules by inspecting your repository's observed interface evidence.

Does the generated design contract include accessibility safeguards?▼

Yes, the generated design contract includes accessibility safeguards. The output DESIGN.md explicitly covers accessibility as one of its nine concrete sections to ensure frontend compliance.

What sections are included in a DESIGN.md design contract?▼

A DESIGN.md design contract includes nine concrete sections: theme, colors, typography, spacing, components, motion, voice, accessibility, and non-goals to prevent UI drift.

Do I need to complete an interview to set up UI planning rules?▼

You do not need to complete an interview to set up UI planning rules. The Skill offers a recommendation-first interview flow, but can also derive rules directly from existing interface evidence.

Related Skills

Explore More Design & Creative Skills→
AcosmiAcosmi
6

sessions-list

List active sessions with optional filters and pagination.

Community
Intermediate
marcustamarcusta

frontend-design

Enforce TapScore design constraints on frontend UI components.

Community
Advanced
CharitablebusinessroninCharitablebusinessronin

frontend-design

Enforce brand tokens and WCAG accessibility across Next.js and Tailwind projects.

Community
Advanced
carson-sweetcarson-sweet
6

Design UX

Conduct structured design interviews to generate UX/UI specification documents.

Community
Advanced