What makes Design Guide notable?

2.3K downloads. Trust evidence available

How should Design Guide be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Design Guide

Frontend design, implementation, and production QA Skill: Design Guide Owner: grubbylee Summary: Frontend design, implementation, and production QA Tags: latest:0.1.2 Version history: v0.1.2 | 2026-08-08T16:10:13.728Z | auto - Initial release of f-design-2 v0.1.2 as "design-guide": a comprehensive frontend design and production engineering orchestrator. - Introduces structured reference routing for design, implementation, review, and environment-specific decisions. -

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.3k

Updated

Oct 9, 2026

Version

0.1.2

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2.3K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2.3K downloadsadoption · observed Oct 9, 2026
Latest release: 0.1.2release · observed Aug 8, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s177gc2ae6jagj5ta42ajajrfs8bqm1t:f-design-2

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-grubbylee-f-design-2/snapshot"

Documentation

CLAWHUB

72,956 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: design-guide
description: Frontend design and production engineering orchestrator that inventories projects, scales design depth, presents review artifacts, locks executable contracts, implements accessible responsive interfaces, and verifies interactions, visual regressions, and performance. Use when the user invokes design-guide, @design-guide, /design-guide, asks for frontend design/development/redesign, web app UI, dashboard, tool interface, landing page, responsive React/HTML/CSS work, design previews or choices, screenshot QA, production frontend quality, or says they are dissatisfied with generic AI-looking UI. If invoked without a concrete task, enter navigation mode and recommend the best available frontend-related skills/tools for the user's environment instead of coding.
---

# F Design

Use this as the frontend entry skill. It is not a single visual style; it controls product thinking, approval, implementation, and production verification.

## Reference Routing

Read only the references required by the task:

- Existing repository or substantial implementation: `references/project-intelligence.md`.
- New screen, major redesign, ambiguous direction, or workflow change: `references/design-process.md`.
- Any artifact created for user review: `references/artifact-presentation.md`.
- Approved Level 2 or multi-state/multi-route implementation: `references/implementation-contract.md`.
- API, form, permissions, async, mutation, or non-trivial state: `references/state-and-data.md`.
- Stack-specific implementation decisions: matching section of `references/framework-adapters.md`.
- Substantial implementation verification: `references/quality-gates.md`.
- UI/UX review request: `references/review-rubric.md`.
- Existing product/page design evaluation, pros/cons critique, or actionable improvement report: `references/product-design-review.md`, `references/review-rubric.md`, and `references/anti-ai-design-tells.md` when visual quality or generic AI-looking UI is in scope.
- Specialized review targets: use the matching file under `references/review-templates/` for data tables, dashboards, complex forms, mobile navigation, or high-risk batch actions.
- Release-level workflow verification or maintainer work: `references/end-to-end-journeys.md`.
- Internationalization, CLI language selection, or translated maintainer docs: `references/internationalization.md`.

## Context Files

Before substantial work, look for preference files in this order:

1. `.design-guide/profile.md` in the current project.
2. `~/.design-guide/preferences.md` on the local machine.
3. `references/design-defaults.md` bundled with this skill.

Read only the files that exist and are relevant. Project and local files override bundled defaults. Keep personal preferences out of the skill folder so the skill remains open-source friendly.

## Invocation Modes

### Mode 1: Navigation

Use this mode when the user only says `design-guide`, `@design-guide`, `/design-guide`, "use des

README.md

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="assets/design-guide-logo-dark.svg">
    <source media="(prefers-color-scheme: light)" srcset="assets/design-guide-logo-light.svg">
    <img alt="design-guide - Frontend Design Orchestration" src="assets/design-guide-logo-light.svg" width="560">
  </picture>
</p>

# design-guide

English | [简体中文](README.zh-CN.md)

[![Validate](https://github.com/GrubbyLee/design-guide/actions/workflows/validate.yml/badge.svg)](https://github.com/GrubbyLee/design-guide/actions/workflows/validate.yml)
[![Sync to Gitee](https://github.com/GrubbyLee/design-guide/actions/workflows/sync-to-gitee.yml/badge.svg)](https://github.com/GrubbyLee/design-guide/actions/workflows/sync-to-gitee.yml)
[![Release](https://img.shields.io/github/v/release/GrubbyLee/design-guide)](https://github.com/GrubbyLee/design-guide/releases)
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

> A frontend design orchestration skill for Codex, Claude Code, Cursor, Qwen Code, and other AI development environments.

`design-guide` is not another UI style preset. It is a frontend design and production engineering control skill: it helps an AI coding agent understand a repository, choose and present a design direction, lock an executable contract, implement the UI, and verify behavior and quality before delivery.

Current version: **v0.1.1**. See [AIDE compatibility](COMPATIBILITY.md) for separate installed, synchronized, and provider-invoked evidence. Chinese release notes are available in [中文兼容性](COMPATIBILITY.zh-CN.md).

Use it when you want fewer generic AI-looking interfaces and a more disciplined frontend design/development loop.

## What It Does

- Acts as a frontend entry skill and navigator.
- Supports two modes:
  - **Navigation mode**: invoked without a concrete task, it lists the best frontend tasks and helper skills available in the environment.
  - **Execution mode**: invoked with a real task, it follows a structured design-to-implementation workflow.
- Scales the design process from direct fixes to exploratory design, based on uncertainty and the cost of reversing a decision.
- Produces and presents reviewable artifacts such as wireframes, standalone HTML prototypes, reference boards, images, or motion studies when they are needed.
- Automatically opens standalone HTML on a shared local desktop, manages HTTP review servers when needed, and uses host-accessible links or screenshots in remote environments.
- Pauses at explicit confirmation gates so the user can approve, choose a direction, or request changes before expensive implementation.
- Routes tasks such as dashboards, admin panels, landing pages, redesigns, screenshot-to-code work, mobile UI, animation, 3D, and UI reviews.
- Evaluates existing product/page designs by mode, scores strengths and weaknesses, flags generic AI-design tells, and outputs prioritized, actionable improvement plans with evidence, tradeoffs, acce

_meta.json

{
  "ownerId": "kn7fzmvcq3sggwf0kjtbz67mwx8bqeq9",
  "slug": "f-design-2",
  "version": "0.1.2",
  "publishedAt": 1786205413728
}

references/aide-integration.md

# AIDE Integration

Use this reference only when the user asks how to install, sync, or invoke `design-guide` across AI development environments.

## Local Source of Truth

Primary folder:

```text
~/.codex/skills/design-guide
```

Use the current repository as the source of truth. A conventional Codex installation uses the folder above; the sync script safely skips it when source and target are identical.

## Known Local Targets

Supported local skill roots:

```text
~/.codex/skills
~/.claude/skills
~/.cursor/skills
~/.qwen/skills
```

Recommended install paths:

```text
~/.codex/skills/design-guide
~/.claude/skills/design-guide
~/.cursor/skills/design-guide
~/.qwen/skills/design-guide
```

## Invocation Guide

- Codex: "use design-guide", `design-guide`, `$design-guide`, or `@design-guide` if the interface supports it.
- Claude Code: `/design-guide` when installed as a Claude skill; otherwise say "use design-guide".
- Cursor: say "use design-guide"; if it does not detect the skill, point it to the local `SKILL.md`.
- Qwen Code: say "use design-guide"; if it does not detect the skill, point it to the local `SKILL.md`.
- Unknown AIDE: add the folder to the tool's skill/rule/context directory, or paste the `SKILL.md` path and ask the agent to follow it.

## Sync

Run:

```bash
bash ~/.codex/skills/design-guide/scripts/sync-aide.sh
```

The script copies the source folder into Codex, Claude, Cursor, and Qwen skill directories. It skips any target that resolves to the source itself.

Each target is a managed mirror. Files that no longer exist in the source are removed. Repository metadata, temporary review artifacts, generated Python caches, and `.design-guide/profile.md` are excluded.

For an isolated verification or managed environment, redirect only the target root:

```bash
F_DESIGN_TARGET_HOME=/path/to/sandbox \
bash ~/.codex/skills/design-guide/scripts/sync-aide.sh
```

The source can be overridden independently with `F_DESIGN_SRC`.

The sync command ends with a strict doctor check. A successful copy is not reported as synchronized until every public-file digest matches the source.

## Version And Upgrade Diagnosis

Check the repository version and every local AIDE mirror:

```bash
python3 scripts/design-guide-doctor.py --strict
```

Machine-readable output:

```bash
python3 scripts/design-guide-doctor.py --strict --json
```

Upgrade a Git clone source, verify it, and synchronize the local mirrors:

```bash
git -C ~/.codex/skills/design-guide pull --ff-only
python3 ~/.codex/skills/design-guide/scripts/design-guide-doctor.py
bash ~/.codex/skills/design-guide/scripts/sync-aide.sh
```

If the active source is another checkout, set `F_DESIGN_SRC` explicitly before syncing. Restart or reload each AIDE after an upgrade when it caches skill discovery.

## Compatibility Verification

Use three levels of evidence and report them separately:

1. **Installed:** the AIDE CLI and its `design-guide/SKILL.md` path exist.
2. **Synchronized:** the installed

references/anti-ai-design-tells.md

# Anti-AI Design Tell Review

Use this as a companion to `references/product-design-review.md` and `references/review-rubric.md` when the user asks for design critique, redesign readiness, visual polish, or says the interface looks generic, templated, or AI-generated.

This file is not a style preference list. Treat each item as a diagnostic signal. A pattern is only a finding when it harms product fit, task clarity, trust, originality, accessibility, or conversion.

## High-Confidence Tells

Flag these with evidence when visible:

- Default AI purple/blue gradients, neon glows, or decorative mesh backgrounds with no brand rationale.
- Three equal feature cards or repeated equal cards where the content has different importance.
- Centered hero with vague headline, vague subtext, and generic CTA.
- Fake dashboard, fake terminal, or fake product preview built from decorative rectangles instead of a real screenshot, generated asset, or actual component.
- Fake-precise metrics such as `99.9%`, `10x`, `48k`, or `92%` without source, label, or sample context.
- Decorative status dots, version labels, build metadata, or weather/time/location strips that do not convey real state.
- Overused eyebrow labels on every section, especially numbered labels such as `01`, `002`, `INDEX`, or `PHASE`.
- Mixed visual systems: inconsistent radius, icon families, shadows, typography, button styles, or neutral palettes.
- Card nesting and section-as-card structure that hides hierarchy instead of clarifying it.
- Generic names, generic avatars, placeholder companies, or `Acme`-style brands presented as real content.
- Copy that reads like filler: "seamless", "elevate", "unlock", "next-gen", "effortless", or poetic phrases that do not explain the product.

## Product UI Tells

For dashboards, admin panels, tools, editors, and workbenches, also check:

- Marketing-page hero structure used for an operational tool.
- Excessive empty space that slows scanning in high-frequency work.
- Metrics shown as decorative cards without drilldown, source, freshness, or action path.
- Tables hidden behind card grids when users need comparison, sorting, filtering, or bulk action.
- Every row action exposed equally instead of prioritizing common actions and protecting dangerous actions.
- Bulk actions without impact summary, permission gating, confirmation, undo, or audit trail.
- Empty/loading/error states omitted because only the successful demo state was designed.
- High-risk AI outputs shown with opaque scores instead of explainable reasons and evidence.
- Mobile layout merely squeezed from desktop, with fixed toolbars, clipped labels, or unreachable primary actions.

## Marketing And Conversion Tells

For landing pages, homepages, pricing pages, and campaign pages, also check:

- Hero value proposition could apply to any SaaS after changing the logo.
- CTA labels change wording across nav, hero, pricing, and footer for the same intent.
- Trust logos are plain text wordmarks or invent

Github ReposUpdated 3h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.