Uncodixify Uncodixify【免费下载链接】Uncodixfythe holly uncodexify instructions - letting GPT create uncodexified UI项目地址: https://gitcode.com/gh_mirrors/un/UncodixfyThis document exists to teach you how to act as non-Codex as possible when building UI.### **保持正常原则** 文件详细列出了各种UI元素应该遵循的标准 - **侧边栏**240-260px固定宽度实色背景简单右边框 - **按钮**实色填充或简单边框圆角不超过8-10px - **卡片**简单容器圆角8-12px无浮动效果 - **阴影**最大0 2px 8px rgba(0,0,0,0.1)无戏剧性阴影 ### **硬性禁止项** 文件明确禁止了AI最常犯的错误 - 无超大圆角 - 无浮动玻璃态外壳 - 无软性企业渐变 - 无装饰性侧边栏元素 - 无内部界面中的英雄区域 ## 对比分析使用Uncodixfy前后的界面差异 ### **案例一仪表板界面** 让我们通过实际对比来看看Uncodixfy的效果 **使用前典型AI界面** - 浮动玻璃态侧边栏 - 过度圆角的卡片 - 装饰性标签和标题 - 渐变背景和阴影 [![典型AI仪表板界面](https://raw.gitcode.com/gh_mirrors/un/Uncodixfy/raw/e0e028058b5259debdd94b78147c6d6c77bf7da2/images/2.png?utm_sourcegitcode_repo_files)](https://link.gitcode.com/i/1cde01160ca85b7dbacdada97fa84c29) **使用后Uncodixified界面** - 简洁的固定侧边栏 - 适当的圆角和阴影 - 清晰的视觉层次 - 功能优先的设计 [![优化后的仪表板界面](https://raw.gitcode.com/gh_mirrors/un/Uncodixfy/raw/e0e028058b5259debdd94b78147c6d6c77bf7da2/images/3.png?utm_sourcegitcode_repo_files)](https://link.gitcode.com/i/1cde01160ca85b7dbacdada97fa84c29) ### **案例二数据展示界面** **使用前的问题** - 不必要的图表装饰 - 过度使用的标签徽章 - 混合的对齐逻辑 - 过度填充的布局 **使用后的改进** - 干净的数据表格 - 功能性徽章 - 一致的对齐方式 - 适当的留白 [![数据界面对比](https://raw.gitcode.com/gh_mirrors/un/Uncodixfy/raw/e0e028058b5259debdd94b78147c6d6c77bf7da2/images/4.png?utm_sourcegitcode_repo_files)](https://link.gitcode.com/i/1cde01160ca85b7dbacdada97fa84c29) ## 如何在实际项目中使用Uncodixfy ### ️ **安装和使用方法** Uncodixfy提供了多种使用方式 1. **作为规则文件**直接将[Uncodixfy.md](https://link.gitcode.com/i/0b6d202505a42be0f2249ea30a24ab75)包含在你的AI提示中 2. **作为Agent技能**通过[SKILL.md](https://link.gitcode.com/i/ba3eda0869d593e5f7125819b45a3787)文件作为AI编码代理的技能使用 ### **快速开始指南** bash # 安装Uncodixfy技能 npx skills add cyxzdev/Uncodixfy【免费下载链接】Uncodixfythe holly uncodexify instructions - letting GPT create uncodexified UI项目地址: https://gitcode.com/gh_mirrors/un/Uncodixfy创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考