skills.rest
narr07
narr07COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-swiss-system

Generates grid-driven Swiss-style React and Next.js interfaces with typographic discipline.

Updated Aug 10, 2026
Search Tags:#typography#react#tailwind css#ui design#frontend generation#grid layout#swiss design
One-click install
npx skills add https://github.com/narr07/permadi --skill design-taste-swiss-system-narr07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-swiss-system
Source: https://github.com/narr07/permadi/tree/main/.agents/skills/swiss-design-solosamente
Command: npx skills add https://github.com/narr07/permadi --skill design-taste-swiss-system-narr07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often defaults to generic SaaS templates with purple gradients, equal card rows, and weak typography. This Skill enforces International Typographic Style discipline so generated interfaces follow exact grids, rational type scales, and controlled asymmetry instead of template patterns. ## Core Features & Use Cases - Baseline Design Dials: Configures DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY values that drive layout, animation, and information density decisions across the whole page. - Swiss Style Direction: Applies grotesk typography, 12-column grids, rule-separated modules, spec tables, and a restrained palette of white, off-black, and one signal color. - Bias Correction Rules: Bans common AI tells such as gradient headlines, rounded-2xl cards, emoji decoration, and hero-features-testimonials template ordering. - Use Case: Ask for a portfolio or product landing page and receive production-ready React or Next.js code with Tailwind styling, disciplined motion, real imagery, and complete interaction states. ## Quick Start Build a Swiss-style landing page for my architecture studio using a strict grid, neo-grotesk typography, and one red accent color.

Frequently Asked Questions about design-taste-swiss-system

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

FAQPage Schema
How do I generate a Swiss-style landing page with AI?▼

Request a page with Swiss or International Typographic Style keywords and the Skill applies its baseline dials: variance 4, motion 1, density 5. It produces grid-driven React or Next.js code with grotesk typography, one signal accent color, and disciplined spacing.

What design system rules does Swiss style frontend generation follow?▼

It uses 12-column grids, mathematical type scales, uppercase tracked labels, tabular numerals, and flat exact surfaces. Palettes stay limited to white, off-black, and one functional signal color, with no blur, gradients, or decorative haze.

Does this work with Tailwind CSS and Next.js projects?▼

Yes, Tailwind CSS is the default styling policy and Next.js with Server Components is the default architecture. The Skill checks package.json before importing any library and outputs install commands for missing dependencies.

Can I adjust the motion and density levels for generated pages?▼

Yes, the three dials DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY accept values from 1 to 10. State your preference explicitly, such as calmer or denser, and the Skill adapts the baseline values to your request.

Why does AI-generated UI look generic and how is it avoided?▼

Generic output comes from repeated template patterns like purple gradients, equal feature cards, and centered heroes. The Skill bans these AI tells explicitly and enforces authored composition, real imagery, and style-specific component vocabulary.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
javiruujaviruu

design-taste-brutalism

Generates brutalist React and Next.js interfaces with poster-led layouts and hard structural hierarchy.

Community
Advanced
wikimediawikimedia
7

codex-usage

Adopt Wikimedia Codex design system components, tokens, and icons in frontend projects.

Official
Advanced