菜单
Convert UI screenshots and designs to working code. Use when translating visual designs, mockups, or screenshots into HTML/CSS/React components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design.
Android development patterns for Kotlin/Java including MediaProjection, Accessibility Service, Socket.IO, and foreground services. Use when working on TitanMirror or other Android projects.
Design RESTful APIs with proper routes, validation, error handling, and documentation. Use when building backend services for PSI Engine or other server applications.
Automate browser interactions including form filling, clicking, typing, navigation, and screenshot capture. Use this skill when testing web apps, automating uploads, or validating UI on TikTok, YouTube, or other web platforms.
Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.
Automated CI/CD pipeline setup with GitHub Actions, deployment strategies, and automation workflows. Use for build automation, testing, and deployment.
| name | vision-to-code |
| description | Convert UI screenshots and designs to working code. Use when translating visual designs, mockups, or screenshots into HTML/CSS/React components. |
Page
├── Header (nav, logo, menu)
├── Hero (title, subtitle, CTA)
├── Features (grid of cards)
├── Testimonials (carousel)
└── Footer (links, social)
<div className="card">
<img src={image} alt={title} className="card-image" />
<div className="card-content">
<h3 className="card-title">{title}</h3>
<p className="card-description">{description}</p>
<button className="card-button">Learn More</button>
</div>
</div>
.card {
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-4px);
}
<nav className="navbar">
<div className="logo">Brand</div>
<ul className="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
<button className="cta-button">Get Started</button>
</nav>
| Visual Element | CSS Property | Example |
|---|---|---|
| Primary Color | --primary | #6366f1 |
| Background | --bg | #f8fafc |
| Text | --text | #1e293b |
| Border Radius | --radius | 12px |
| Shadow | --shadow | 0 4px 6px rgba(0,0,0,0.1) |
| Font | --font | 'Inter', sans-serif |
/* Mobile First */
.container {
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}