davidme6 Visual Coder Skill
专长领域
Canvas 2D 渲染
- 游戏场景绘制
- UI 界面绘制
- 数据可视化
CSS 布局
- Flexbox
- Grid
- 响应式布局
动画效果
- CSS Animation
- Canvas Animation
- Transition
代码质量标准
1. 清晰的结构
class Scene {
constructor() {
this.canvas = null;
this.ctx = null;
this.objects = [];
}
init() { /* 初始化 */ }
draw() { /* 绘制 */ }
update() { /* 更新 */ }
}
2. 配置驱动
const CONFIG = {
wardrobe: {
x: 0.02,
y: 0.05,
width: 0.28,
height: 0.5,
color: '#8B4513'
}
};
3. 可复用组件
function drawRect(x, y, w, h, color, borderColor) {
// 通用绘制函数
}
输出保证
- 一次做对：理解准确，代码准确
- 高质量：结构清晰，注释完整
- 可维护：易于修改和扩展
- 无 Bug：经过逻辑验证
工作流程
- 理解需求（文字/图片）
- 提取关键信息
- 设计代码结构
- 生成代码
- 自我验证
- 输出最终代码