功能描述

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Combines the design intelligence of UI/UX Pro Max with Anthropic's anti-slop philosophy. Use for building UI components, pages, applications, or interfaces with exceptional attention to detail and bold creative choices.

使用说明 (SKILL.md)

Anthropic Frontend Design

Name: Anthropic Frontend Design
Author: qrucio

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It integrates structured design intelligence (accessibility, UX rules, stack guidelines) with a bold, intentional aesthetic philosophy.

Core Philosophy: Anti-AI Slop

Claude (and all AI agents) are capable of extraordinary creative work, yet often default to safe, generic patterns. This skill MANDATES breaking those patterns.

AVOID: Inter, Roboto, Arial, system fonts, purple-on-white gradients, cookie-cutter SaaS layouts, emojis as icons.
MANDATE: Unique typography, context-specific color schemes, intentional motion, unexpected spatial composition, and production-grade functional code.

Design Thinking Process

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this solve? Who is it for?
Tone: Pick an extreme direction—brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, etc.
Intelligence (Reference): Use the internal design tool to gather data (see below).
Differentiation: What makes this UNFORGETTABLE?

Design Intelligence Tool

Use the internal search tool to gather palettes, font pairings, and UX guidelines. CRITICAL: You MUST filter the results through the Anti-AI Slop lens. If the tool suggests "Inter" or "Roboto", you are REQUIRED to ignore it and pick a distinctive alternative.

# Generate a complete design system
python scripts/search.py "\x3Cproduct_type> \x3Cindustry> \x3Ckeywords>" --design-system

# Search specific domains (style, typography, color, ux, chart, landing)
python scripts/search.py "\x3Ckeyword>" --domain \x3Cdomain>

# Get stack-specific guidelines (html-tailwind, react, nextjs, shadcn, etc.)
python scripts/search.py "\x3Ckeyword>" --stack \x3Cstack_name>

Implementation Standards

1. Professional UI Rules

Rule	Do	Don't
Icons	Use SVG (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Typography	Beautiful, unique Google/Custom fonts	Inter, Roboto, Arial, System fonts
Hover	Stable transitions (color/opacity/shadow)	Scale transforms that shift layout
Cursor	Add `cursor-pointer` to all interactive items	Leave default cursor on buttons/cards
Contrast	Minimum 4.5:1 for accessibility	Low-contrast "vibes" that are unreadable

2. Motion & Animation

Prioritize CSS-only solutions where possible.
Focus on high-impact moments (staggered reveals on page load).
Use duration 150-300ms for micro-interactions.

3. Spatial Composition

Use asymmetry, overlap, or diagonal flow to break standard grids.
Balance generous negative space OR intentional density.

Pre-Delivery Checklist

Before delivering code, verify every item:

Visual Quality

No emojis used as icons (SVG only).
Typography is characterful and NOT "AI standard".
Color scheme is unique to the context (no generic gradients).
Hover states provide clear, stable visual feedback.

UX & Accessibility

All interactive elements have cursor-pointer.
Form inputs have labels; images have alt text.
Text contrast meets 4.5:1 minimum (test Light/Dark modes).
Responsive at all breakpoints (375px, 768px, 1024px, 1440px).
No horizontal scroll on mobile.

Aesthetic Directions (Reference)

Brutally Minimal: Monochrome, extreme white space, sparse typography.
Maximalist Chaos: Overlapping elements, dense information, pattern mixing.
Retro-Futuristic: Chrome effects, neon accents, 80s-inspired.
Luxury/Refined: Gold/Dark accents, serif fonts, generous spacing.
Playful/Toy-like: Rounded corners, bright pastels, bouncy animations.
Editorial/Magazine: Grid-based, bold headlines, clean hierarchy.
Brutalist/Raw: Monospace fonts, harsh contrasts, industrial.
Art Deco: Sharp angles, metallic accents, ornate borders.

Commit to ONE direction and execute it fully—no half measures.

安全使用建议

This package mostly looks like an opinionated frontend design assistant that uses local Python scripts and CSV data. Before running it, do the following: (1) Confirm the environment has Python and any required libraries, or ask the author to declare required binaries/dependencies. (2) Inspect the Python files (scripts/search.py, core.py, design_system.py) for any network calls, subprocess usage, or reads of environment variables or sensitive paths (look for requests/urllib/socket/subprocess/os.environ/open). (3) If you can't review the code, run it in an isolated/sandboxed environment or container, not on a laptop with credentials. (4) Ask the publisher for a homepage or source repo and for a clear dependency list (python version, pip packages). The primary incoherence is that SKILL.md assumes 'python' is available but the metadata doesn't declare any required binaries — that should be resolved before trusting execution.

功能分析

Type: OpenClaw Skill Name: anthropic-frontend-design Version: 1.1.0 The skill is designed for UI/UX design, and its `SKILL.md` uses prompt-injection-like instructions to guide the AI agent's creative output (e.g., 'MANDATE breaking those patterns', 'REQUIRED to ignore it'), which is aligned with its stated purpose of avoiding 'AI slop' and not malicious. However, the `scripts/design_system.py` and `scripts/search.py` include functionality to write markdown files to the local filesystem (`Path.cwd()` or a user-specified `output_dir`). While the intent is to save design documentation to a `design-system/` subdirectory, the underlying capability to write to an arbitrary directory is a risky behavior that could be exploited by a malicious prompt if the OpenClaw agent runtime does not adequately sandbox or validate the `output_dir` parameter.

能力评估

ℹ Purpose & Capability

The skill claims to produce opinionated frontend design output and includes many CSV design-data assets and Python scripts (search.py, design_system.py, core.py) which fit that purpose. However, the SKILL.md explicitly instructs running python scripts, yet the declared 'required binaries' list is empty — that's an incoherence between what the skill expects at runtime and what the metadata declares. Either Python should be declared as required or the instructions should not assume a python runtime.

✓ Instruction Scope

The SKILL.md instructions focus on design tasks (gather palettes, fonts, UX guidelines) and call local scripts (python scripts/search.py). The instructions do not request unrelated system files, credentials, or external endpoints in prose. That scope is consistent with the stated purpose. Note: the runtime behavior depends on what the included Python scripts do — the instructions cause code execution.

ℹ Install Mechanism

There is no install spec (low install risk). However, the package contains executable Python scripts and many data files, so running the skill will execute bundled code. Because no install step is provided, the environment is expected to already have Python and any needed libs; this expectation is not declared in metadata, which is a mismatch and can confuse users or cause unexpected failures.

ℹ Credentials

The manifest declares no required environment variables or credentials and the SKILL.md doesn't ask for secrets. That is appropriate for a design tool. But the presence of non-trivial scripts means they might still access the network, read environment variables, or call system commands — those actions are not visible in the manifest. You should review the Python sources for uses of os.environ, subprocess, socket/requests/urllib, or other I/O before granting runtime access.

✓ Persistence & Privilege

The skill is not force-included (always: false) and is user-invocable (normal). There is no indication it requests persistent system-wide privileges or modifies other skills' configurations. Autonomous invocation is allowed (platform default); that increases the blast radius only if the code performs unexpected remote or credential access.

版本历史

v1.1.0

Combined with UI/UX Pro Max intelligence and added professional standards.

v1.0.0

Distinctive UI design framework inspired by Anthropic's anti-AI-slop philosophy. Guides agents to create production-grade frontends with bold aesthetic directions, avoiding generic patterns (Inter, purple gradients, cookie-cutter layouts). Includes Design Thinking Process (Purpose/Tone/Constraints/Differentiation), comprehensive aesthetic guidelines (Typography, Color, Motion, Spatial Composition, Backgrounds), and 11 extreme aesthetic direction examples (Brutally Minimal, Maximalist Chaos, Retro-Futuristic, etc.). Ensures each design is unique, context-specific, and memorable.

元数据

Slug anthropic-frontend-design

版本 1.1.0

许可证 —

累计安装 12

当前安装数 12

历史版本数 2

常见问题