design

Select a design direction from a 20-philosophy style library for HTML output.

Updated Jul 29, 2026
One-click install
npx skills add https://github.com/2lab-ai/soma-work --skill design-2lab-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/2lab-ai/soma-work/tree/main/src/local/skills/design
Command: npx skills add https://github.com/2lab-ai/soma-work --skill design-2lab-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides design direction advice by selecting from a 20-philosophy style library, enforcing anti-AI-slop discipline, and supplying typography/scale/contrast rules to ensure generated HTML appears professional.

Core Features & Use Cases

  • Design Direction Selection: Offers a choice from a comprehensive style library for HTML visual output.
  • Anti-AI-Slop Rules: Adheres to strict guidelines to prevent generic design choices.
  • Typography/Scale/Contrast Rules: Provides guidance for optimal visual presentation.

Quick Start

Use the design skill to recommend a design direction for a landing page.

Frequently Asked Questions about design

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

FAQPage Schema
How do I prevent generic AI-generated design when building HTML landing pages?

You can enforce anti-AI-slop rules to prevent generic design choices in HTML output. This discipline ensures your landing page features intentional typography, scale, and contrast decisions instead of predictable, templated layouts.

What is a design direction style library and how does it work for HTML?

A design direction style library provides 20 distinct visual philosophies to guide HTML output. It works by letting you select a specific aesthetic direction, which then supplies the corresponding typography, scale, and contrast rules for rendering.

How do I choose the best typography and contrast rules for a professional website?

Choose typography and contrast rules by selecting a deliberate design direction from a 20-philosophy style library. This selection supplies professional typography, scale, and contrast guidelines tailored to your chosen aesthetic for HTML rendering.

Can I use specific design philosophies for different HTML visual outputs?

Yes, you can select from a 20-philosophy style library to apply specific design directions to HTML visual output. Each philosophy enforces unique anti-AI-slop rules and supplies distinct typography, scale, and contrast guidelines for professional rendering.

Why does my AI-generated HTML look generic and lack professional typography?

AI-generated HTML looks generic when it lacks a deliberate design direction and anti-AI-slop discipline. Without selecting a specific style philosophy and enforcing structured typography, scale, and contrast rules, the output defaults to predictable, unprofessional templates.