【方法一： 网站上找APP界面设计图，告诉cursor根据设计图完成开发】 dribbble.com/shots/26658… 找到APP设计
-
粘贴图片，输入指令 Create a JSON profile design system that extracts visual data from these images so that i can use the JSON output in Cursor to give it context on how to replicate such design systems in a consistent style. Avoid including the contents of the specific images. The output should include the design style, the structure and anything that'll help an Al replicate such designs
-
输入指令 Build a calm and mindful digital space designed to help users manage emotions, track habits, and maintain mental balance.
Highlights:
🌿 Personalized Relax Plans – choose between meditation, relaxation, or mindfulness routines. 💬 Daily Guidance – receive motivational quotes and mental health tips tailored to your day. 📊 Stress & Sleep Tracking – monitor emotional state and recovery progress with clean visual analytics. 🧠 Interactive Quizzes – engage with self-reflection tasks and simple mental detox activities. Soft tones and rounded visuals create a peaceful experience, blending psychological wellness with elegant UI simplicity.
I just need it in html, ess and js
Please follow @design-system-profile.json for the design
【方法二： 从tweakcn.com 网站上获取主题色css文件，让cursor根据css文件构建APP/WEB应用】
【方法三： 从第三方组件库网站上获取优秀的组件，这比直接让cursor生成UI组件要更好】 组件库： reactbits.dev/ ui.aceternity.com/components/…
【ps提升设计的关键】 关键一： Screenshot any 3D effect you like → paste into ChatGPT → ask "How do I prompt Cursor to add this 3D effect to my hero section?"
Add smooth animations and micro interactions like:
- smooth hover effects
- gentle tilt effects
- scroll-based animations
- animated glitch-style
- inertia-based scroll
关键二：字体选择 从fonts.google.com中选择合适的字体，然后获取字体代码
<style>
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&display=swap');
</style>
复制到cursor中，并告诉cursor：【add this font to the main heading in the hero section】 指令明确说明应用在哪里，准确生成
关键三：明确指令 例子：
Create a bento layout that becomes single column on mobile
make it in css, js and html
make the file name as bento.html
cursor才能根据你明确的意图，生成对应效果的产品。以下整理了一些常用的布局名称
Layout布局
Bento Grid
"Making a bento layout that transforms into single column on mobile"
Masonry Layout
"Creating masonry cards that reflow into fewer columns on mobile"
Sidebar Layout
"Building sidebar navigation that becomes bottom tabs on mobile"
Hero Section
"Designing hero content that stacks vertically on mobile"
Card Grid
"Making card grids that become single column lists on mobile"
Split Layout
"Creating split screens that accordion on mobile"
Dashboard Widgets
"Building widget layouts that reorder priority on mobile"
Navigation Menu
"Making horizontal menus that become hamburger on mobile"
Floating Elements
"Creating floating buttons that dock to bottom on mobile"
Gallery Grid
"Building image galleries that become carousels on mobile"
