skills.rest
markerikson
markeriksonCOMMUNITY
Explore all skills by this author →
Website𝕏@acemarkeGitHub

frontend-design

Creates frontend interfaces with token-driven design systems and AI slop quality checks.

41|4|Updated May 6, 2026
Search Tags:#typography#accessibility#design-system#responsive-design#color-tokens#interaction-design#frontend-ui
One-click install
npx skills add https://github.com/markerikson/opencode-config-example --skill frontend-design-markerikson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/markerikson/opencode-config-example/tree/main/config/skill/frontend-design
Command: npx skills add https://github.com/markerikson/opencode-config-example --skill frontend-design-markerikson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents AI-generated interfaces from looking generic, inconsistent, or “AI slop” by enforcing intentional design direction and polished, functional UI implementation.

Core Features & Use Cases

  • Design-system-first frontend execution: Establish typography, color tokens, spacing rhythm, and component conventions before coding to ensure consistency.
  • Aesthetics with functional intent: Guide UI decisions toward scanability, information density, accessibility, and cohesive visual hierarchy rather than decoration.
  • Implementation quality guardrails: Apply practical checks (an “AI slop test”) and detailed guidance across typography, color/theme, layout, motion, interaction, and responsiveness for production readiness.

Quick Start

Create a production-grade dashboard UI with a consistent token-driven design system by following the frontend-design guidelines for typography, color semantics, spacing rhythm, and functional interaction patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I avoid generic AI slop in frontend UI design?▼

To avoid generic AI slop in frontend UI design, enforce intentional design direction using token-driven styling, semantic color rules, and refined typography hierarchy before coding components.

How do I build a production-grade design system for web components?▼

Build a production-grade design system by establishing typography, color tokens, spacing rhythm, and component conventions first, ensuring functional polish, scanability, and information density.

What is token-driven styling in responsive frontend design?▼

Token-driven styling in responsive frontend design uses semantic color and spacing rules to maintain cohesive visual hierarchy and consistent UI patterns across different screen sizes.

Does this approach support high information density and accessibility?▼

Yes, this approach supports high information density and accessibility by guiding UI decisions toward scanability, functional intent, and cohesive visual hierarchy rather than mere decoration.

What are the limitations of using automated design systems for frontend interfaces?▼

Automated design systems can produce inconsistent visual hierarchy and generic styling if they lack practical quality guardrails like an AI slop test and detailed interaction guidelines.

Can I use this method to create a dashboard with high design quality?▼

Yes, you can create a dashboard with high design quality by following guidelines for typography, color semantics, spacing rhythm, and functional interaction patterns to ensure production readiness.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
tadams95tadams95
1

framer-motion

Implement React UI animations with Framer Motion motion components and variants.

Community
Intermediate
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic