skills.rest
hodinhtuankiet
hodinhtuankietCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Develop distinctive visual identities for UI projects using typography, color, and motion principles.

Updated Aug 27, 2026
Search Tags:#typography#design#branding#ui-design#visual-identity#design-process#design-critique
One-click install
npx skills add https://github.com/hodinhtuankiet/screening-resume-recruitment --skill frontend-design-hodinhtuankiet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/hodinhtuankiet/screening-resume-recruitment/tree/main/frontend/.agents/skills/frontend-design
Command: npx skills add https://github.com/hodinhtuankiet/screening-resume-recruitment --skill frontend-design-hodinhtuankiet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Grounded in the brief, this guidance helps teams avoid templated visuals by establishing a distinctive design point of view, typography, and layout decisions aligned with the subject and audience.

Core Features & Use Cases

  • Ground the design process in the subject matter and audience to produce a unique visual language.
  • Provide structured design principles for typography, color, motion, and layout, plus a repeatable critique workflow.
  • Employ a two-pass process ( brainstorm, plan, critique, build ) to refine concepts before implementation and ensure cohesion.

Quick Start

Define the subject, audience, and page job, then craft a distinctive design plan with deliberate typography, color, and layout choices.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I develop a distinctive visual identity for a UI design project?▼

Develop a distinctive visual identity by grounding the design process in your subject matter and audience, applying structured principles for typography, color, and layout to produce a unique visual language instead of templated visuals.

What is the two-pass design process for web and product design?▼

The two-pass design process employs a brainstorm, plan, critique, and build workflow to refine UI concepts before implementation, ensuring deliberate visual cohesion across web and product design projects.

How do I run a structured design critique workflow for UI branding explorations?▼

Run a structured design critique workflow by applying a repeatable process within the build phase, evaluating typography, color, motion, and structure against the initial brief to refine visual identity concepts.

Can I use this design process for both web and product design briefs?▼

Yes, you can apply this design process to web and product design briefs, branding explorations, and critique workflows to establish a distinctive design point of view aligned with the subject and audience.

What's the best way to avoid templated visuals in UI design?▼

The best way to avoid templated visuals is to establish a distinctive design point of view through a two-pass process, making deliberate typography, color, motion, and layout decisions aligned with the subject and audience.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

frontend-design

Define a distinctive UI identity through typography, color, and layout decisions.

Community
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
milano-jsmilano-js
6

frontend-design

Generates distinctive frontend interfaces with intentional aesthetics and production-ready code.

Official
Advanced