skills.rest
aimi-so
aimi-soOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Automates frontend interface design and implementation with HTML/CSS/JS components.

10|Updated Feb 15, 2026
Search Tags:#design#ui#frontend#react#css#aesthetics
One-click install
npx skills add https://github.com/aimi-so/aimi-engineering-plugin --skill frontend-design-aimi-so
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/aimi-so/aimi-engineering-plugin/tree/main/plugins/aimi-engineering/skills/frontend-design
Command: npx skills add https://github.com/aimi-so/aimi-engineering-plugin --skill frontend-design-aimi-so

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides designers and engineers to craft distinctive, production-grade frontend interfaces with exceptional visual detail and creative polish.

Core Features & Use Cases

  • Frontend aesthetics guidelines for typography, color, motion, and spatial composition
  • Produce production-ready HTML/CSS/JS components or framework modules (React, Vue, or vanilla)
  • Use Case: Build a cohesive component library and UI system for a product with a strong visual identity

Quick Start

Specify a bold visual direction and generate a working frontend component with HTML/CSS/JS that embodies it

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend components with strong visual aesthetics?▼

Production-grade frontend components require enforcing typography, color, motion, and spatial composition guidelines to generate working UI modules with a bold visual direction.

What's the best way to create a cohesive UI system for React or Vue?▼

The best way to create a cohesive UI system for React or Vue is to generate framework-specific modules that embody a distinctive visual identity, ensuring your components are accessible and reusable across the product.

Can I generate accessible HTML and CSS code without external dependencies?▼

Yes, you can generate accessible HTML and CSS code without external dependencies, as the Skill operates with zero dependencies to produce production-ready vanilla JS or framework-specific components.

How does frontend design automation handle typography and motion guidelines?▼

Frontend design automation handles typography and motion guidelines by applying built-in aesthetic rules during component generation, ensuring the output code satisfies requirements for strong visual detail and creative polish.

Does this approach work for building an entire component library or just single pages?▼

This approach works for both single pages and entire component libraries, applying production-grade frontend aesthetics guidelines to build a cohesive UI system with a strong visual identity across web projects.

Related Skills

Explore More Design & Creative Skills→
AndyMarigoldLabsAndyMarigoldLabs

frontend-design

Create distinctive frontend interfaces with design tokens in code.

Community
Basic
hotriluanhotriluan

ck:frontend-design

Convert design inputs into HTML, CSS, and JS with reusable UI components.

Community
Advanced
nopkhunnopkhun

dev-engineer

Implement Zustand state management and React Hook Form validation with Zod for UI components.

Community
Advanced
czambrczambr

frontend-design

Create production-grade frontend interfaces with distinctive typography, color, and motion.

Community
Advanced