ui-design은(는) 무엇을 하나요?
사용자가 웹 또는 미니 프로그램 UI를 구현하기 전에 시각적 방향, 인터페이스 계층 구조, 레이아웃 결정, 디자인 사양 또는 프로토타입이 필요할 때 사용합니다.
사용자가 웹 또는 미니 프로그램 UI를 구현하기 전에 시각적 방향, 인터페이스 계층 구조, 레이아웃 결정, 디자인 사양 또는 프로토타입이 필요할 때 사용합니다.
이 스킬은 웹 또는 미니 프로그램 UI를 구현하기 전에 필요한 시각적 방향, 인터페이스 계층 구조, 레이아웃 결정, 디자인 사양 및 프로토타입을 제공하는 데 특화되어 있습니다. 주로 Tencent Cloud Base 환경에서 사용되며, 개발자와 디자이너 간의 협업을 원활하게 하고 초기 설계 단계에서 발생할 수 있는 모호함을 줄이는 데 도움을 줍니다. 이 스킬은 AI 에이전트가 사용자 요구 사항을 분석하여 UI 디자인 단계에서 필요한 구체적인 지침과 명세서를 생성함으로써, 실제 코딩 전에 디자인을 검증하고 수정할 수 있도록 지원합니다. Web 및 미니 프로그램 개발 프로젝트에서 디자인 결정을 체계화하고 문서화하는 데 유용합니다.
npx skills add https://github.com/tencentcloudbase/skills/tree/main/skills/ui-designInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
사용자가 웹 또는 미니 프로그램 UI를 구현하기 전에 시각적 방향, 인터페이스 계층 구조, 레이아웃 결정, 디자인 사양 또는 프로토타입이 필요할 때 사용합니다.
This repo contains 8 individual skills — each has its own dedicated page.
Use this skill for WeChat Mini Program AI via wx.cloud.extend.AI (小程序, 企业微信小程序, wx.cloud apps). Features generateText and streamText with callbacks (onText, onEvent, onFinish). Models via wx.cloud.extend.AI.createModel with groups hunyuan-exp (小程序成长计划), cloudbase (main managed), or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the data wrapper model field. API differs from JS/Node SDK — streamText needs data wrapper, generateText returns raw response. MUST run two-step preflight before code — see body. Keywords: Mini Program AI, wx.cloud.extend.AI, 小程序成长计划, ai_miniprogram_inspire_plan, Token Credits 资源包, generateText, streamText, createModel, hunyuan-exp, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for browser/Web (use ai-model-web), Node.js backend (use ai-model-nodejs), or image generation (use ai-model-nodejs).
CloudBase WeChat Mini Program native authentication guide. This skill should be used when users need mini program identity handling, OPENID/UNIONID access, or `wx.cloud` auth behavior in projects where login is native and automatic.
Use CloudBase document database WeChat MiniProgram SDK to query, create, update, and delete data. Supports complex queries, pagination, aggregation, and geolocation queries.
CloudBase platform overview and routing guide. This skill should be used when users need high-level capability selection, platform concepts, console navigation, or cross-platform best practices before choosing a more specific implementation skill.
CloudBase function runtime guide for building, deploying, and debugging your own Event Functions or HTTP Functions. This skill should be used when users need application runtime code on CloudBase, not when they are merely calling CloudBase official platform APIs.
WeChat Mini Program development skill for building, debugging, previewing, testing, publishing, and optimizing mini program projects. This skill should be used when users ask to create, develop, modify, debug, preview, test, deploy, publish, launch, review, or optimize WeChat Mini Programs, mini program pages, components, `tabBar`, routing, navigation, icon assets, project structure, project configuration, `project.config.json`, `appid` setup, device preview, real-device validation, WeChat Developer Tools workflows, `miniprogram-ci` preview/upload flows, or mini program release processes. It should also be used when users explicitly mention CloudBase, `wx.cloud`, Tencent CloudBase, 腾讯云开发, or 云开发 in a mini program project.
Use when medium-to-large changes need explicit requirements, technical design, and task planning before implementation, especially for multi-module work, unclear acceptance criteria, or architecture-heavy requests.
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.