Xpersona
agentCLAWHUBUnverified

UI Design

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Skill: UI Design Owner: bovinphang Summary: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-27T03:52:43.126Z | user

OpenClaw
View on ClawHubHomepage

Rank

62

Safety

84

Downloads

1.1k

Updated

Oct 11, 2026

Version

2.9.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/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 11, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 11, 2026
Adoption signal
1.1K downloadsadoption · observed Oct 11, 2026
Latest release
2.9.0release · observed Sep 27, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-ui-design
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. 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-bovinphang-fec-ui-design/snapshot"

Documentation

CLAWHUB

121,459 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: fec-ui-design
description: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.
---

#UI design

Suitable for UI tasks that require advancing the front-end interface to be "in line with the product context, scannable, trustworthy, recognizable, and stable in details". When systematic design suggestions are needed, load [design-intelligence.md](references/design-intelligence.md); when long-term precipitation of the design system is required, load [master-page-overrides.md](references/master-page-overrides.md); when doing UI/UX QA before going online, load [pre-delivery-checklist.md](references/pre-delivery-checklist.md).

The executable design system generator is located at [design-system.mjs](scripts/design-system.mjs), and its original knowledge package includes [product-rules.json](data/product-rules.json), [style-archetypes.json](data/style-archetypes.json), [ux-quality-rules.json](data/ux-quality-rules.json) and [stack-ui-rules.json](data/stack-ui-rules.json).

## Purpose

Establish design direction for pages, components, dashboards and tool interfaces, and complete implementable visual and interactive polish.

## Procedure

1. Clarify the work of the interface
   - Start by saying what task it helps the user accomplish, rather than choosing a color or layout first.
   - Determine whether this is a daily high-frequency tool, marketing display, content reading, visual exploration, game, or configuration/management backend.
   - If Figma, Sketch, MasterGo, Pixso, Ink Knife, Mockup or screenshots are the source of truth, give priority to restoring the design context and do not invent your own direction.

2. Read the design context
   - Before deciding on layout, colors, fonts, or motion, write out a line of design that reads: page type, target audience, primary mission, brand constraints, and sources of trustworthiness.
   - Determine whether the current interface is a visual website, work/brand display, product marketing, tool workspace, data-intensive interface, mobile native process, or design draft restoration task.
   - If the brief is clearly divergent, e.g. "minimalist yet intensely experimental", only ask a question that will change direction; otherwise make clear choices based on context.
   - Regulated, public service, medical, financial, children, or strong accessibility scenarios prioritize stability, clarity, and recoverability without sacrificing usability for aesthetic adventures.

3. Define aesthetic proposition
   - Write out the target users, usage scenarios, sources of trustworthiness, and a visual anchor that will be remembered.
   - Visual anchors can come from information structure, real media, data form, industry materia

README.md

# UI design

Product-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.

## Skill

- ID: `fec-ui-design`
- Category: `design-ui`
- Version: `2.9.0`
- Source: `skills/fec-ui-design/SKILL.md`

## Description

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.

## Usage

Install or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.

## Packaged Files

- [data/product-rules.json](data/product-rules.json)
- [data/stack-ui-rules.json](data/stack-ui-rules.json)
- [data/style-archetypes.json](data/style-archetypes.json)
- [data/ux-quality-rules.json](data/ux-quality-rules.json)
- [references/design-intelligence.md](references/design-intelligence.md)
- [references/master-page-overrides.md](references/master-page-overrides.md)
- [references/pre-delivery-checklist.md](references/pre-delivery-checklist.md)
- [scripts/design-system.mjs](scripts/design-system.mjs)

## Optional Related Packages

- `@bovinphang/fec-image-generation`
- `@bovinphang/fec-implement-from-design`
- `@bovinphang/fec-accessibility-check`
- `@bovinphang/fec-code-review`
- `@bovinphang/fec-tailwind-design-system`
- `@bovinphang/fec-responsive-layout`
- `@bovinphang/fec-storybook-component-doc`
- `@bovinphang/fec-web-video-presentation`

## License

MIT

_meta.json

{
  "ownerId": "kn7b0nh7hvj1pffeqc8y0dqwwh83m726",
  "slug": "fec-ui-design",
  "version": "2.9.0",
  "publishedAt": 1790481163126
}

references/design-intelligence.md

#DesignSmartReference

This reference is used to turn obscure UI requests into an executable design system. Start by identifying the product category, then combine style archetypes, color roles, font moods, motion rhythms, graphic tasks, and UX risks.

## Decision-making process

1. Extract keywords: product type, users, scenarios, main tasks, content density, brand tone, technology stack.
2. Write out the design reads: page type, audience, primary mission, brand constraints, and sources of trustworthiness.
3. Match product rules: Select the closest category from `data/product-rules.json` and record the recommended structure, risks and anti-patterns.
4. Select style archetypes: Select 1 main style and up to 1 auxiliary style from `data/style-archetypes.json` to avoid style collage.
5. Set the design dial: visual tension, motion intensity, information density, media authenticity, and content persuasiveness are all expressed on a scale of 1-10, and vary with the page type.
6. Establish token direction: define the semantic roles of main color, accent color, background, foreground, border, dangerous color and focus ring.
7. Choose font mood: Don’t just choose a “good-looking font”, explain the tone and readability of the title and body text respectively.
8. Judgment of data expression: Use polylines/areas for trends, columns for comparisons, donut charts to form a small number of categories, funnels/steps for processes, and tables must be retained for details.
9. Output anti-patterns and quality gates: Every design suggestion must be accompanied by a “what not to do” and supplemented with above-the-fold, CTAs, media authenticity, section changes, and state integrity checks based on page type.

## Direction Advisor

When the user only says "looks better", "give me some directions", "I don't know what style" and there is no authoritative design draft, don't continue to ask general questions about taste. First, give 3 directions with obvious differences so that users can judge the choice.

Each direction must contain:

- Applicable scenarios: Why it is suitable for the current product, audience and task.
- Visual anchors: information structure, real media, data form, material, font character, spatial organization or interaction rhythm.
- Key tokens: main color, accent color, background, font mood, rounded corners/border/shadow tendency.
- What to avoid: This is the easiest templating error to slip into.

The three directions should come from different design logics, such as:

- Information architecture type: high-density, rational, data-first, suitable for B2B, operations, finance, and engineering tools.
- Editorial narrative type: layout, white space, strong text hierarchy, suitable for brand stories, content products, and portfolios.
- Product demonstration type: real screenshots, objects, status, and process evidence are given priority, suitable for SaaS, hardware, and developer tools.
- Experimental expression: strong motion effect, sense of space,

references/master-page-overrides.md

# Global/page level difference coverage

When the project needs to maintain UI consistency for a long time, use `design-system/MASTER.md` to store the global design system, and use `design-system/pages/<page>.md` to store page-level differences.

## Reading order

1. First check whether the current page has `design-system/<project>/pages/<page>.md`.
2. If it exists, the rules in the page file cover the same dimensions in the Master.
3. If it does not exist, follow `design-system/<project>/MASTER.md` exactly.
4. The page file only records differences and does not copy the full text of the Master.

## Generate command

```bash
node skills/fec-ui-design/scripts/design-system.mjs "saas analytics dashboard" --project "Acme Console" --persist --output-dir .
```

Generate page overrides:

```bash
node skills/fec-ui-design/scripts/design-system.mjs "saas analytics dashboard" --project "Acme Console" --page dashboard --persist --output-dir .
```

## Page override should contain

- Differences in page tasks and information density
- Layout differences: workspace, table, chart, form, detail page or marketing first screen
- token difference: only write the semantic color, spacing, status or chart color that needs to be covered
- Component differences: only write new or changed component behaviors on the current page
- QA Focus: The current page’s most error-prone responsiveness, accessibility, performance, or interaction risks

Related agents

Same protocol, similar job.

Github ReposUpdated 2d 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.

MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/bovinphang/skills/fec-ui-design",
      "sourceUrl": "https://clawhub.ai/bovinphang/skills/fec-ui-design",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:31:19.223Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:31:19.223Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "1.1K downloads",
      "href": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceUrl": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T12:31:19.223Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "2.9.0",
      "href": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceUrl": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-09-27T03:52:43.126Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 2.9.0",
      "description": "- Major simplification and partial English translation of documentation in SKILL.md. - Removed detailed step-by-step design procedures and constraints; retained main workflow stages in more concise form. - Added LICENSE file; removed skill-card.md documentation. - SKILL.md description tightened and edited for brevity. - Documentation is now accessible to a broader (English-reading) audience, but with less procedural depth.",
      "href": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceUrl": "https://clawhub.ai/bovinphang/fec-ui-design",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-09-27T03:52:43.126Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 11, 2026.

Sponsored

Ads related to UI Design and adjacent AI workflows.