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

ferrox-frontend-design

Create distinct frontend and UI designs with contract-based design tokens.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you create frontend and UI surfaces that feel distinct, purposeful, and product-specific instead of generic or template-driven. It is designed to keep visual decisions grounded in the subject, the audience, and the screen’s real job.

Core Features & Use Cases

  • Design direction selection: Choose an aesthetic system that fits the product, such as editorial warm, cinematic dark, bento grid, or brutalist luxe.
  • Contract-driven UI work: Use DESIGN.md as the binding source of truth for palettes, typography, spacing, components, and do-not rules once a project has locked its visual language.
  • On-demand design knowledge: Search the bundled knowledge base for palettes, typography pairings, UX rules, patterns, and brand references without loading everything at once.
  • Use case: If you are redesigning a dashboard, landing page, or app screen, this Skill helps you pick a coherent direction, define the tokens, and keep the implementation consistent from first mockup to final UI.

Quick Start

Ask for a design direction for your screen, and have the Skill propose a subject-specific visual system and the tokens to use before you start building.

Frequently Asked Questions about ferrox-frontend-design

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

FAQPage Schema
How do I create a UI design that doesn't look like a generic template?▼

To create UI designs that avoid generic templates, use contract-based design tokens to define distinct palettes, typography, and layout rules grounded in your product's specific audience and screen requirements.

What's the best way to establish a design system for a new dashboard?▼

Establishing a dashboard design system involves selecting a subject-specific aesthetic direction and defining binding design tokens for spacing, components, and typography to keep implementation consistent from mockup to final UI.

How do design tokens keep frontend layouts consistent across product screens?▼

Design tokens keep frontend layouts consistent by acting as a binding contract, locking visual decisions like palettes and typography rules so that every product screen adheres to the same non-generic aesthetic system.

Can I search for specific typography pairings and UX rules on demand?▼

Yes, you can search a bundled knowledge base on demand to retrieve specific typography pairings, UX rules, palettes, and brand references without loading all design reference data at once.

When do I need a contract-driven design direction for my landing page?▼

You need a contract-driven design direction when your landing page requires a purposeful, product-specific visual language rather than a generic aesthetic, ensuring all component rules and spacing remain consistent.

What limitations exist when using a design system contract for frontend UI?▼

A limitation of using a design system contract is that once the visual language and design tokens are locked in a DESIGN.md file, you must adhere to strict do-not rules, restricting spontaneous layout changes during implementation.

Related Skills

Explore More Design & Creative Skills→
BadTechBanditBadTechBandit
3

product-marketing-context

Creates and updates a product marketing context document (.agents/product-marketing-context.md) from your codebase or inputs.

Community
Intermediate
hungthinh04hungthinh04

popular-web-designs

Generate brand-accurate HTML and CSS web designs from real-world design systems.

Community
Advanced
whyashthakkerwhyashthakker

frontend-design

Create production-ready frontend interfaces with design systems in React, Vue, or Angular.

Community
Advanced
redisreadredisread

ui

Fix visual UI defects and build components with design token consistency.

Community
Advanced