ui-design
Design Distinctive UI Prototypes
Generic AI interfaces often lack visual direction and platform-aware detail. This skill guides Claude, Codex, and Claude Code to define design intent before building prototypes.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "ui-design" from https://skillstore.io/skills/tencentcloudbase-ui-design.md and its manifest at https://skillstore.io/api/skills/tencentcloudbase-ui-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "ui-design". I need a web dashboard for a logistics team.
Expected outcome:
- Purpose statement for dispatch planners and managers.
- Industrial or utilitarian aesthetic with concrete color and typography choices.
- Screen plan for dashboard, shipment detail, and exception review.
Using "ui-design". Redesign my education mini program so it feels less generic.
Expected outcome:
- Editorial or organic direction with a restrained palette.
- Typography and layout rules for small screens.
- Audit notes that remove centered card patterns and emoji icons.
Security Audit
SafeAll static findings are false positives. Backticks are Markdown, URLs are reference links, and relative paths point to sibling skill documents. No evidence found for prompt injection, data exfiltration, or malicious execution intent in SKILL.md.
Risk Factors
⚙️ External commands (15)
🌐 Network access (4)
📁 Filesystem access (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/tencentcloudbase-ui-design/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/tencentcloudbase-ui-design?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/tencentcloudbase-ui-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/tencentcloudbase-ui-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/tencentcloudbase-ui-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
tencentcloudbase. (2026). ui-design security audit report (audit version 2) [Author version 2.23.8]. Skillstore. https://skillstore.io/skills/tencentcloudbase-ui-design/audits/2BibTeX citation
@techreport{tencentcloudbase-tencentcloudbase-ui-design-2026,
author = {tencentcloudbase},
title = {ui-design security audit report (audit version 2)},
institution = {Skillstore},
year = {2026},
number = {2},
url = {https://skillstore.io/skills/tencentcloudbase-ui-design/audits/2},
note = {Author version 2.23.8}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-design security audit report (audit version 2)"
version: "2.23.8"
type: report
authors:
- name: "tencentcloudbase"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/tencentcloudbase-ui-design/audits/2"
identifiers:
- type: other
value: "skillstore:tencentcloudbase-ui-design:audit:2"
description: "Skillstore immutable audit report identifier"
Compare variants
2 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
tencentcloudbase-ui-design
2026-08-21
yunshu0909-ui-design
2026-08-21
Skillstore Score
Why this score Evidence Confidence: MediumWhat You Can Build
Shape Product Screens
Turn early product ideas into visual direction, page scope, and prototype-ready interface plans.
Prepare Frontend Prototypes
Define hierarchy, palette, typography, and layout rules before building a web interface.
Refine Mini Program UI
Plan small-screen pages with clear aesthetics, platform constraints, and concrete handoff guidance.
Try These Prompts
Use the ui-design skill to create a design specification for [product]. Include users, purpose, aesthetic direction, palette, typography, and layout strategy.
Use the ui-design skill to plan a [web or mini program] prototype for [workflow]. Limit it to [number] pages and define each screen.
Use the ui-design skill to redesign this interface: [description]. Identify generic patterns, choose a stronger direction, and propose a revised hierarchy.
Use the ui-design skill before implementation for [project]. Produce a platform-specific design spec, component plan, self-audit checklist, and handoff notes.
Best Practices
- Provide target users, primary actions, platform, and brand constraints.
- Review the design specification before asking for implementation.
- Request accessibility, responsiveness, and content states when moving to code.
Avoid
- Using this skill for backend, API, or database-only work.
- Skipping the design specification and requesting immediate code.
- Ignoring real brand systems when approved tokens already exist.
Frequently Asked Questions
Does this skill write final frontend code?
Which platforms does it support?
Can I use my brand colors?
Why does it require a design specification first?
Does it handle backend work?
How should I start?
Developer Details
Author
tencentcloudbaseLicense
MIT
Author version
v2.23.8
Skillstore revision
r1
Ref
24b2fe42a456262f3fd0fb3df72e12d9ed2c32ec
Maintenance freshness
7/18/2026
Usage
1 downloads · 0 views
File structure
📄 SKILL.md