skills.rest
lucking7
lucking7COMMUNITY
Explore all skills by this author →
GitHub

ce-frontend-design

Guide web interface creation with typography, color, composition, and motion principles.

Updated Jun 7, 2026
Search Tags:#design system#user experience#interface design#web design#frontend development
One-click install
npx skills add https://github.com/lucking7/compound-engineering-skills --skill ce-frontend-design-lucking7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/lucking7/compound-engineering-skills/tree/main/skills/ce-frontend-design
Command: npx skills add https://github.com/lucking7/compound-engineering-skills --skill ce-frontend-design-lucking7

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of building web interfaces that lack design quality and are dominated by AI-generated aesthetics. It provides a structured approach to frontend design, ensuring coherence, usability, and adherence to best practices.

Core Features & Use Cases

  • Context Detection: Identifies existing design systems and adapts accordingly.
  • Pre-Build Planning: Encourages clear visual, content, and interaction plans.
  • Design Guidance Core: Offers principles for typography, color, composition, motion, accessibility, and imagery.
  • Module-Based Approach: Provides specific guidelines for landing pages, apps, dashboards, and components.
  • Visual Verification: Ensures the final design aligns with the initial plan and litmus checks.
  • Iterative Refinement: Allows for systematic, progressive improvement of web components.

Quick Start

Use the ce-frontend-design skill to guide the design of a new landing page for your product.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I create high-quality web interfaces using a structured frontend design workflow?▼

To create high-quality web interfaces, follow a structured frontend design workflow covering composition, typography, color, motion, and copy. This process includes context detection, pre-build planning, and iterative refinement to ensure design integrity and usability.

What is the best way to build web interfaces that avoid generic AI-generated aesthetics?▼

The best way to avoid generic AI-generated aesthetics is applying structured design guidance for typography, color, composition, and motion. This ensures interface coherence and adherence to established frontend design best practices.

How do I ensure my frontend development respects an existing design system?▼

To ensure frontend development respects an existing design system, use context detection to identify current design patterns and adapt accordingly. This maintains visual coherence and usability across new web interfaces.

Can I get specific design guidance for different web modules like landing pages and dashboards?▼

Yes, you can get specific design guidance for different web modules. A module-based approach provides tailored guidelines for building landing pages, applications, dashboards, and individual components within your frontend workflow.

How do I visually verify and iteratively refine web components during interface design?▼

To visually verify and iteratively refine web components, implement litmus checks against your initial pre-build plan. This allows for systematic, progressive improvement of web interfaces to ensure alignment with design principles.

Related Skills

Explore More Design & Creative Skills→
VanLVanL
1

design-html

Converts approved mockups and planning details into HTML and CSS code.

Community
Intermediate
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
SantiagoisperSantiagoisper

ce-frontend-design

Build distinctive frontend interfaces with design guidelines for typography, color, and accessibility.

Community
Advanced
Ankish8Ankish8

myoperator-design

Generate React/Tailwind UI code using the myOperator design system.

Community
Intermediate