Brain-ai-biz

Brain Edit Pages — Design skill for Claude Code

Design community

✏️ Canva-style in-browser Edit Mode for any HTML landing page built with Claude Code - edit text, images, colors & sections, then export a clean page.

How to install Brain Edit Pages

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Brain-ai-biz/Brain-edit-pages and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Brain Edit Pages does

✏️ Canva-style in-browser Edit Mode for any HTML landing page built with Claude Code - edit text, images, colors & sections, then export a clean page. Zero dependencies, RTL-ready.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★

README

Page Edit Mode ✏️

**מצב עריכה ויזואלי (בסגנון Canva) לכל דף נחיתה HTML שנבנה עם Claude Code.**

בניתם דף נחיתה מהמם עם Claude - אבל כל תיקון קטן של מילה, צבע או תמונה דורש עוד פרומפט וסבב נוסף? החבילה הזו מוסיפה לדף כפתור **✏️ עריכה** שהופך אותו לעריכה חיה בדפדפן: בוחרים, גוררים, מקלידים, מחליפים תמונה, צובעים - ושומרים. בלי שרת, בלי התקנות, בלי תלות בשום כלי חיצוני. הכל נשאר בקובץ HTML אחד.

![Page Edit Mode - מצב עריכה בפעולה על דף נחיתה](assets/demo.gif)

מה אפשר לעשות במצב עריכה


🖱️ בחירה והזזה	לחיצה בוחרת את מה שאתם רואים, לחיצה שנייה נכנסת פנימה. גרירה מזיזה אלמנט - אפילו בין סקשנים
✍️ עריכת טקסט	לחיצה כפולה על כל טקסט - מקלידים ישר על הדף (הדבקה תמיד כטקסט נקי)
🖼️ החלפת תמונות	מחליפים כל תמונה בקובץ מהמחשב, מוקטן אוטומטית כדי לא להכביד על הדף
➕ הוספת בלוקים	מוסיפים בלוק טקסט או תמונה חדש בזרימת הדף
🎨 צבעים מהמותג	פלטת הצבעים נשאבת אוטומטית מה-`:root` של הדף - כל שינוי נשאר נאמן לעיצוב
🔠 טיפוגרפיה וריווח	הגדלה/הקטנה של גופן, מרווחים בין סקשנים, הדגשה (Bold)
🧱 סקשנים	שינוי סדר, שכפול והסתרה של מקטעים שלמים בדף
🔗 קישורים	עריכת היעד (href) של כל כפתור או לינק
↩️ ביטול/שחזור	Cmd+Z / Cmd+Shift+Z + שמירה אוטומטית בדפדפן ושחזור אוטומטי בריענון
🔒 נעילה חכמה	תוכן שנכתב על-ידי קוד (טיימרים, מונים, טייפרייטר) ננעל אוטומטית מעריכה ידנית
💾 שמירה ופרסום	שומרים קובץ ערוך, או מייצאים גרסה נקייה ומוכנה להעלאה לאתר

התקנה (2 דקות, Claude עושה הכל)

הורידו את הריפו (Code → Download ZIP) או:

git clone https://github.com/Brain-ai-biz/Brain-edit-pages.git

פתחו את Claude Code בתיקיית הפרויקט שלכם, והדביקו:

התקן לי את הסקיל שנמצא בתיקייה Brain-edit-pages:
העתק אותה אל ‎.claude/skills/page-edit-mode בפרויקט שלי (או ~/.claude/skills),
ואז הוסף את מצב העריכה לדף הנחיתה האחרון שיצרת לי.