skills.rest
apollostreetcompany
apollostreetcompanyCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Analyze existing codebases to generate web interface design plans.

Updated Mar 23, 2026
Search Tags:#design system#interface design#web design#front-end development#aesthetic guidelines
One-click install
npx skills add https://github.com/apollostreetcompany/codex-compound --skill frontend-design-apollostreetcompany
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/apollostreetcompany/codex-compound/tree/main/plugins/compound-engineering/skills/frontend-design
Command: npx skills add https://github.com/apollostreetcompany/codex-compound --skill frontend-design-apollostreetcompany

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating high-quality, design-focused web interfaces, ensuring a balance between AI-driven suggestions and human design principles.

Core Features & Use Cases

  • Context Detection: Automatically identifies existing design systems and adjusts recommendations accordingly.
  • Pre-Build Planning: Offers guidelines for visual, content, and interaction planning.
  • Design Guidance Core: Provides rules for typography, color, composition, motion, accessibility, and imagery.
  • Module Selection: Offers distinct modules for landing pages, apps, dashboards, and components.
  • Hard Rules & Anti-Patterns: Outlines default design choices and best practices to avoid.
  • Visual Verification: Assesses the design's visual accuracy and adherence to guidelines.

Quick Start

Use the frontend-design skill to generate a design plan for a new landing page, focusing on a 'brutally minimal' aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I plan web interface design before building a new landing page?▼

Web interface design planning involves analyzing existing codebases to provide pre-build guidelines for visual, content, and interaction elements. This ensures design consistency and enhances user experience before actual development begins.

What are the core rules for front-end development interface design?▼

Front-end development interface design rules cover typography, color, composition, motion, accessibility, and imagery. Enforcing these design best practices ensures high-quality, consistent web interfaces and prevents common anti-patterns during builds or modifications.

Do I need a design system to generate web interface designs?▼

You do not need a pre-existing design system, as the process automatically detects existing systems and adjusts recommendations accordingly. However, understanding design tokens, component libraries, and CSS frameworks is required to maintain consistency.

Can I use interface design guidelines for both new builds and modifications?▼

Yes, interface design guidelines apply to both new builds and modifications. By assessing visual accuracy and adherence to aesthetic guidelines, the process ensures design consistency and user experience enhancement across all web interface projects.

Related Skills

Explore More Design & Creative Skills→
MayandevMayandev
3.2k

frontend-design

Automate creation of production-grade frontend interfaces with structured design systems.

Community
Basic
TumeloRamaphosaTumeloRamaphosa

ui-ux-pro-max

Analyze web and mobile interfaces for accessibility, visual hierarchy, and interaction patterns.

Community
Advanced
habrahgithubhabrahgithub

tailwind-design-system

Create Tailwind CSS design tokens and component variants for consistent theming.

Community
Intermediate
sudatsudat

frontend-design

Generate production-grade frontend interfaces with unique aesthetics and working code.

Community
Advanced