skills.rest
XiaoMaColtAI
XiaoMaColtAICOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade HTML/CSS/JS or React/Vue frontend interfaces with typography, color, and motion.

71|10|Updated Mar 7, 2026
Search Tags:#typography#frontend#react#ui-design#aesthetics#ui-components#html-css-js
One-click install
npx skills add https://github.com/XiaoMaColtAI/BettaFish-skill --skill frontend-design-xiaomacoltai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/XiaoMaColtAI/BettaFish-skill/tree/main/subskills/frontend-design
Command: npx skills add https://github.com/XiaoMaColtAI/BettaFish-skill --skill frontend-design-xiaomacoltai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often end up with generic, forgettable web interfaces or fragile prototype code that fails in production; this skill eliminates that gap by guiding creation of distinctive, production-grade frontend interfaces with intentional aesthetics and robust, working code.

Core Features & Use Cases

  • Aesthetic-first production code: Deliver working HTML/CSS/JS or framework components that match a clear, bold visual direction rather than generic templates.
  • Design system details: Provide typography pairings, CSS variables for color systems, motion plans, spacing scales, and accessibility considerations.
  • Multi-scenario output: Build landing pages, dashboards, React/Vue components, marketing artifacts, or UI refinements tailored to audience and context.
  • Deliverables: Exportable component code, asset suggestions, and implementation notes that a developer can drop into a project.
  • Use case: Turn a brief into a polished, production-ready React landing page with unique typography, responsive layout, and tasteful entrance animations.

Quick Start

Create a responsive landing page in React with a bold editorial aesthetic emphasizing distinctive typography, a cohesive color system, subtle motion, and accessible markup.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-grade React components with distinctive UI design instead of generic templates?▼

To generate production-grade React components with distinctive UI design, this skill applies intentional typography pairings, cohesive color systems, and subtle motion plans. It outputs working HTML/CSS/JS or component code that avoids generic AI aesthetics while ensuring accessible markup and responsive layouts.

What's the best way to build a bold editorial landing page with cohesive typography and color systems?▼

The best way to build a bold editorial landing page is by defining typography pairings and CSS variables for color systems upfront. This skill generates working code with rigorous spatial composition, entrance animations, and accessibility considerations tailored to your audience and context.

Can I use this to style and beautify existing client websites with custom HTML, CSS, and JS?▼

Yes, you can use this to style and beautify existing client websites with custom HTML, CSS, and JS. It handles UI refinements and styling tasks by applying intentional aesthetics, robust design system details, and exportable component code that developers can drop directly into projects.

Does this skill provide design system details like spacing scales and motion plans for dashboards?▼

Yes, this skill provides design system details like spacing scales and motion plans for dashboards. It delivers typography pairings, CSS variables for color systems, accessibility considerations, and implementation notes alongside exportable component code for building distinctive dashboard interfaces.

Why do my AI-generated frontend interfaces look generic and how can I avoid that?▼

AI-generated frontend interfaces look generic because they lack intentional aesthetics and rigorous design systems. This skill eliminates that gap by guiding creation of distinctive, production-grade interfaces with bold visual directions, unique typography, cohesive color systems, and tasteful motion rather than generic templates.

Can I export Vue components with accessibility considerations and implementation notes?▼

Yes, you can export Vue components with accessibility considerations and implementation notes. This skill supports multi-scenario output including React or Vue components, delivering working code with rigorous accessibility markup, asset suggestions, and notes that a developer can drop into a project.

Related Skills

Explore More Design & Creative Skills→
yeshan333yeshan333
94

frontend-design

Generate polished frontend code for web components, pages, and applications.

Community
Advanced
pedroapp100pedroapp100

frontend-design

Generate production-ready HTML, CSS, and React components for custom frontend designs.

Community
Advanced
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
Elric412Elric412
17

frontend-enhancer

Generate production-ready frontend interfaces with Tailwind CSS and semantic HTML.

Community
Advanced