What makes this design skill 'Apple-like'?

It implements the core principles of Clarity, Deference, and Depth, which prioritize content over UI decoration, utilize bold typography, and leverage generous white space to create a premium feel.

Can I use this for complex web applications?

While optimized for storytelling and landing pages, its principles of 'Clarity' and 'Deference' are highly effective for simplifying complex data-heavy interfaces.

Which fonts does the Frontend Design skill use?

It defaults to a high-performance system-ui stack to ensure the aesthetic of SF Pro and Segoe UI without requiring external font licenses or impacting page load speeds.

How does it handle mobile responsiveness?

The skill utilizes fluid typography (CSS clamp) and specific layout density rules to ensure the design scales elegantly from mobile to desktop environments.

Does this skill generate code or just design theory?

It generates both. It provides information architecture (IA) structures, section-by-section layouts, and CSS Design Tokens that can be directly implemented in your frontend projects.

Frontend Design (Codex)

Name: Frontend Design (Codex)
Author: tom237ttkk

bytom237ttkk

0•

デザインツール

Designs and structures premium, Apple-inspired web interfaces focusing on clarity, typography, and purposeful minimalism.

The Frontend Design skill enables Claude to act as a high-end UI/UX designer, specializing in the 'Apple-style' aesthetic. It abstracts core principles—Clarity, Deference, and Depth—into actionable code and layout patterns. By prioritizing a 'one product, one focus' philosophy, it helps developers create layouts with high-impact typography, generous whitespace, and minimal distractions. The skill provides standardized CSS design tokens, strategic information architecture variants, and refined motion guidelines to ensure a production-grade user experience that feels both modern and professional.

主な機能

010 GitHub stars

02Focus-driven layout rules for high-conversion landing pages

03Optimized CTA patterns and minimalist interaction models

04Apple-inspired design principles (Clarity, Deference, Depth)

05Standardized CSS design tokens for fluid typography and spacing

06Progressive disclosure and motion design for improved storytelling

ユースケース

01Building high-converting product landing pages and marketing sites

02Establishing a design system based on clarity and functional hierarchy

03Developing minimalist, premium portfolio layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tom237ttkk/251128_poke frontend-design

For use in Claude.ai and ChatGPT

Download Skill