በሌሊት በ2፡00 ሰዓት ላይ ድህረ ገጽ ለመገንባት ሞክረው ያውቃሉ፣ በካፌይን ተሞልተው በራስ መተማመን ተላብሰው፣ ነገር ግን “ቀላል የመግቢያ ገጽዎ” በእርግጥ የCSS ዝርዝር እና የJavaScript ክስተት አድማጮች መሆኑን ለመገንዘብ? ያኔ ነው ወደ AI ያዘነበልኩት—በተለይም ወደ <Gemini> 3.0 Pro። አእምሮዎ እንደ ንድፍ ዳይሬክተር እና የፊት-ፍጻሜ ገንቢ እየሰራ ከሆነ፣ የ<Gemini> የቅርብ ጊዜ ዘዴዎች ምናልባት ሌሊቱን ሊያሳርፉት ይችላሉ።
እዚህ ላይ ትልቁ ተስፋ የሚሆነው <Gemini> 3.0 Pro የተለመዱትን የ“የሞት ትሮች”—Figma፣ ሰነዶች፣ የኮድ አርታኢ፣ የገንቢ መሣሪያዎች እና አምስተኛውን “ዲቪን እንዴት ማእከል ማድረግ እንደሚቻል” የሚሉ ፍለጋዎችን ሳይጠቀሙ ከሃሳብ ወደ መስተጋብራዊ ፕሮቶታይፕ እንዲቀይሩ ሊረዳዎት ይችላል። ለድር ንድፍ አውጪዎች እና ገንቢዎች ምን እንደሚያደርግ፣ የት እንደሚያርፍ እና የት አሁንም ጫማውን እንደሚደናቀፍ እንፈትሽ።
ድህረ ገጾችን በ <Gemini> 3.0 Pro መንደፍ ምን እንደሚመስል
በቪዲዮ ጥሪ ላይ እንዳሉ፣ የአንድ መነሻ ገጽ ሽቦ ፍሬም እና ያልተዛመዱ ንብረቶች አቃፊ እያጋሩ እንደሆነ አድርገው ያስቡ: የሎጎ PNG፣ የጀግና ፎቶ እና የምርት ስምዎ ሄክስ ቀለሞች “ዘመን የማይሽሩ ናቸው” ብለው የሚምሉት (ትርጉሙ: ትንሽ ሰማያዊ አረንጓዴ)። በ<Gemini> 3.0 Pro አማካኝነት ንጥረ ነገሮችዎን ይመግባሉ እና እንዲህ ይላሉ:
“የጀግና ክፍል፣ የCTA ቁልፍ፣ የሶስት ካርድ የባህሪ ፍርግርግ እና ተለጣፊ ራስጌ ያለው ምላሽ ሰጪ የመግቢያ ገጽ ስጠኝ። ስሜቱን ዘመናዊ-ትንሹን አድርገው፣ እነዚህን ቀለሞች ተጠቀም እና ቁልፉን ሙሉ ቬጋስ ሳታደርጉት አሳምረው።”
ሞዴሉ የሚከተሉትን ማድረግ ይችላል:
- ምክንያታዊ መዋቅር ያለው ንጹህ HTML/CSS/JS ስካፎልዲንግ ይፍጠሩ።
- ክፍልን መሰረት ያደረጉ የአቀማመጥ ቅጦችን ይመክሩ (ሰላም ካርዶች እና እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ዳሰሳዎች)።
- ለሚሰጡዋቸው ንብረቶች ተስማሚ ይሁኑ፡ አርማዎን ያክሉ፣ የጀርባ ምስሎችን ያዘጋጁ፣ የምርት ስምዎን ቤተ-ስዕል ይተግብሩ።
- ተደራሽነት ማስተካከያዎችን ይጠቁሙ—ARIA መለያዎች፣ ሊነበብ የሚችል ንፅፅር፣ ትክክለኛ የትርጓሜ መለያዎች።
- ለውጦችን በቀላል እንግሊዝኛ ያብራሩ፣ ስለዚህ የሌሊቱ 2፡00 ሰዓት ላይ እራስዎ በ... በ2፡00 ሰዓት ላይ እርስዎ የተፃፉ የኮድ አስተያየቶችን መፍታት የለብዎትም።
በአንድ መስኮት ውስጥ ጁኒየር ዲዛይነር እና ጁኒየር ገንቢ ያለዎት ይመስላል። ቡና የማያስፈልገው እና ስለ ፍርግርግ ከ flexbox ጋር የማይከራከር ጁኒየር ማለት ነው። በአብዛኛዎቹ ቀናት ማለት ነው።
የድር ንድፍን ያነሰ የሚያሠቃዩ <Gemini> 3.0 Pro ባህሪያት
የጊዜ ገደብ ላይ ሲሆኑ እና ባለድርሻዎ “የጀግናው ርዕስ ብቅ ማለት ይችላል?” የሚል ኢሜይል ሲልኩ ምን አስፈላጊ እንደሆነ እንመልከት።
ባለብዙ ሞዳል ግብዓት: “እዚህ ንድፉ አለ። እንዲሁም ስሜቱ።”
አቀማመጥን መግለጽ፣ ሻካራ ሽቦ ፍሬም መስቀል ወይም ከቀድሞው ጣቢያ ቅጽበታዊ ገጽ እይታዎችን መለጠፍ እና <Gemini> የእርስዎን ቀለሞች እና የይዘት ብሎኮች በመጠቀም መዋቅሩን እንዲፈጥር መጠየቅ ይችላሉ። የእርስዎን “ሶስት ወፍራም ሳጥኖች” ወደ ንጹህ የባህሪ ክፍል በመቀየር በጣም ጥሩ ነው። በአእምሮ እና በአሳሽ መካከል ያለው ተአምራዊ ተርጓሚ ነው—ቃላትን ሳይጠቀም።
ስማርት ኮድ ትውልድ (HTML/CSS/JS)
<Gemini> አንድ ነጠላ ሞኖሊቲክ ፋይል ከማውጣት ይልቅ የተዋሃዱ ቁርጥራጮችን—ዳሰሳ፣ ጀግና፣ የባህሪ ካርዶች፣ ግርጌ—እና የመገልገያ ክፍሎችን መፍጠር ይችላል። ለTailwind ወይም ለቫኒላ CSS መጠየቅ ይችላሉ። “jQuery አያስፈልግም፣ እባክዎን” ማለት ይችላሉ እና ወደ 2013 አይመለስም። CSS በአጠቃላይ ሊነበብ የሚችል ነው፣ ለማበጀት ግልጽ የቡድን አወቃቀር እና አስተያየቶች አሉት።
እንደ የመማሪያ መጽሐፍ የማይመስል የአቀማመጥ ምክር
<Gemini> እንደዚህ አይነት መመሪያ ይሰጣል: “ባለ ሶስት ካርድ አቀማመጥን በ12-አምድ ሲስተም ለማድረግ CSS ፍርግርግ ተጠቀም፤ ከ640px በታች ወደ አንድ አምድ ቀይር፤ ለተነባቢነት ከፍተኛውን ስፋት አዘጋጅ።” ይህ ብዙ የተዝረከረኩ ጣቢያዎችን ካየ እና ለመናገር በህይወት የተረፈ ልምድ ካለው የፊት-ፍጻሜ ጓደኛዎ የሚጠብቁት አይነት ምክር ነው።
ተደራሽነት በውጤቱ ውስጥ ተካቷል
Alt የጽሑፍ ጥቆማዎች፣ የቁልፍ ሰሌዳ ተስማሚ ዳሰሳ፣ ARIA ሚናዎች እና የቀለም ንፅፅር ፍተሻዎች—እነዚህ እንደተፈጠረው ኮድ እና ማብራሪያ አካል ሆነው ይታያሉ። በየጊዜው ፍጹም አይደለም፣ ግን ከ “a11y በኋላ እናስተካክላለን” ከሚለው የተሻለ ጠንካራ መሠረት ነው። (አበላሽ፡ ማንም አያደርገውም።)
ለአኒሜሽን እና ለማይክሮ-መስተጋብሮች ፈጣን ረቂቅ
ገር የሆነ ቁልፍ መንሳፈፍ፣ ካርድ ላይ ማንሳት እና ተንቀሳቃሽ ስልኮችን የማይሰብር ተለጣፊ ራስጌ ይፈልጋሉ? <Gemini> “የማሳደጊያ ቤት” ኃይል ሳይኖር ጣዕም ያላቸውን ሽግግሮች መፍጠር ይችላል። አስቡት: ግልጽነት እና መለወጥ, ኮንፈቲ መድፍ አይደለም።
በተፈጥሮ ቋንቋ ተደጋጋሚ ማጣራት
እንደ ባልደረባዎ አድርገው ማናገር ይችላሉ: “የጀግናውን ርዕስ ትልቅ አድርጉ፣ በተንቀሳቃሽ ስልክ ላይ ያለውን መሙያ ቀንስ፣ የCTA ቀለሙን ወደ ጠቆር ያለ አረንጓዴ ሰማያዊ ቀይር።” ኮዱን ያዘምናል፣ ምን እንደተለወጠ ያብራራል እና አማራጮችን ይጠቁማል።
ገጽን ለመንደፍ <Gemini> 3.0 Pro እንዴት መጠቀም እንደሚቻል—ደረጃ በደረጃ
ይህን እንደ ፈጣን ጅምር መመሪያዎ አድርገው ይውሰዱት። ምንም የሚያምር ቃላት የሉም። የስራ ፍሰቱ ብቻ ነው።
- ገጹ ለምንድን ነው? ማስጀመር፣ ዝግጅት፣ ምርት? ማን እየጎበኘ ነው? ምን እንዲያደርጉ ይፈልጋሉ?
- <Gemini> የምርት ስም ዝርዝሮችን ይስጡ: የፊደል አጻጻፍ ምርጫዎች, ቤተ-ስዕል, ቃና (“ወዳጃዊ፣ ዘመናዊ፣ ኮርፖሬት ያልሆነ”)።
- ንብረቶችን ያቅርቡ: አርማ, የጀግና ምስል, የናሙና ቅጂ. ሻካራ ሽቦ ፍሬሞች እንኳን ይረዳሉ።
- ክፍሎችን ይጠይቁ: ራስጌ, ጀግና, ባህሪያት, ምስክርነቶች, CTA, ግርጌ.
- ለተወሰኑ የመላመጃ ነጥቦች ምላሽ ሰጪ ባህሪን ይጠይቁ።
- ተደራሽነትን ይደውሉ: “WCAG AA ንፅፅርን፣ የትርጓሜ መለያዎችን፣ የቁልፍ ሰሌዳ ዳሰሳን ያረጋግጡ።”
- <Gemini> የHTML ፋይል እና CSS ይመልሳል፣ አንዳንዴም ለመስተጋብር JS።
- ምን ማስተካከል እንዳለብዎ ይናገሩ፡ ክፍተት፣ የፊደል አጻጻፍ ሚዛን፣ ተንቀሳቃሽ ስልክ መደራረብ፣ የምስል መጠኖች።
- በCSS ውስጥ የት የበለጠ ለማበጀት እንዳሰቡ አስተያየቶችን ይጠይቁ።
- “የጀግናውን ርዕስ ደፋር አድርጉት። የቁልፍ ጽሑፍ፡ ‘ይህን እናድርግ።’ ከበስተጀርባው ላይ ረቂቅ ቅልመት ጨምር።”
- <Gemini> መዋቅሩን ሳይነካ ይዘትን እና ቅጦችን ያዘምናል።
- “በአንድ ትንሽ iPhone ላይ ምን ይሆናል? በ4ኬ ማሳያ ላይ? የጀግናው ምስል ከጠፋስ?”
- <Gemini> ለአፈጻጸም እንዲያመቻች ጠይቁት፡ ወሳኝ CSSን አስቀድሞ መጫን፣ ምስሎችን መጨመቅ፣ ጥቅም ላይ ያልዋሉ ቅጦችን ማስወገድ።
- ለባለድርሻ አካላት በፍጥነት ለማሳየት የ<Gemini> ረቂቅ ይጠቀሙ።
- አንዴ ከተፈቀደ፣ የንድፍ ስርዓቱን እና ክፍሎቹን ያሻሽሉ ስለዚህ CSSን ለዘላለም እንዳያስተካክሉ።
<Gemini> 3.0 Pro የሚያበራባቸው የእውነተኛ ዓለም ሁኔታዎች
- የጅምር መነሻ ገጽ ሩጫ፡ መስራች የ Notion ሰነድ እና በግማሽ የተጋገረ የምርት ስም መመሪያ ይሰጥዎታል። በአንድ ሰዓት ውስጥ ንጹህ፣ ምላሽ ሰጪ ረቂቅ ያዘጋጃሉ፣ በደቂቃዎች ውስጥ ይደግማሉ።
- የክስተት ማረፊያ ገጽ: ቀላል ምዝገባ, መርሃ ግብር, ተናጋሪዎች እና ብሩህ የጀግና ምስል ያስፈልግዎታል. <Gemini> ሁሉንም ነገር ያዘጋጃል፣ ፈጣን CTA እና ተደራሽ የሰንጠረዥ አቀማመጥን ጨምሮ።
- የምርት ባህሪ ማሻሻያ: ግብይት ሶስት አዳዲስ ባህሪያትን በአዶዎች እና አጭር ቅጂ ማጉላት ይፈልጋል. <Gemini> የባህሪ ፍርግርግን ፈጣን የላይ ማንዣበብ ግዛቶች እና ሊነበብ የሚችል አቀማመጥ ይገነባል።
- የፖርትፎሊዮ ማደስ፡ የቅርብ ጊዜ ስራዎን ይቀይሩ፣ ክፍተትን ያስተካክሉ እና ዘመናዊ የጀርባ ንድፍ ያክሉ። <Gemini> “አብነት” ብለው የማይጮኹ ጣዕም ያላቸውን ዘዬዎች ይጠቁማል።
<Gemini> 3.0 Pro አሁንም የሚደናቀፍባቸው ቦታዎች
- ፒክስል-ፍጹም የንድፍ ቁጥጥር: Figma-ደረጃ ቅልጥፍናን እየጠበቁ ከሆነ, የ<Gemini> ኮድ-የመጀመሪያ አቀራረብ በጨለማ ውስጥ የቤት እቃዎችን እንደገና እንደሚያስተካክሉ ሊሰማዎት ይችላል. ጥሩ አጥንቶች፣ ግን አሁንም በጥሩ ሁኔታ ያስተካክላሉ።
- የምርት ስም ልዩነት: ቤተ-ስዕልዎን እና የፊደል አጻጻፍዎን መኮረጅ ይችላል, ነገር ግን የምርት ስምዎን ልዩ የሚያደርጉ ጥቃቅን ነገሮችን በራስ-ሰር አይይዝም. ያ የእርስዎ ስራ ነው—እና ለማንኛውም አስደሳች ነው።
- ውስብስብ የJS መስተጋብሮች: ተለጣፊ ዳሰሳ እና ቀላል ሞዳል? እርግጠኛ። ጥልቅ የስቴት አስተዳደር እና ብጁ የአኒሜሽን የጊዜ መስመሮች? ምናልባት ማዕቀፍን ያዋህዳሉ ወይም ብጁ ኮድ ይጽፋሉ።
- በገጾች መካከል ወጥነት: በአንድ ገጽ ስካፎልዶች ላይ በጣም ጥሩ ነው. ባለብዙ ገጽ ጣቢያዎች፣ ክፍሎችን እንዲያጠቃልል እና ስርዓትን እንዲያስገድድ ይጠይቁት ወይም የራስዎን ይዘው ይምጡ።
የጥያቄ መጽሐፍ: የተሻሉ ውጤቶችን በፍጥነት ያግኙ
<Gemini> የእርስዎ አብሮ አብራሪ ከሆነ ጥያቄዎችዎ የበረራ እቅድዎ ናቸው። እነዚህ በሚያስደንቅ ሁኔታ በጥሩ ሁኔታ ይሰራሉ:
- የመጀመሪያ መዋቅር: “ራስጌ፣ የጀግና ክፍል (ምስል በግራ፣ ጽሑፍ በቀኝ)፣ የሶስት ካርድ ባህሪያት፣ የምስክርነት ካሮሴል እና CTA ያለው ምላሽ ሰጪ የማረፊያ ገጽ ይፍጠሩ። የትርጉም HTML እና አነስተኛ CSS ተጠቀም።”
- ለብራንድ-ተኮር: “ለርዕሶች Inter እና ለሰውነት የስርዓት ቅርጸ ቁምፊዎችን ተጠቀም። ቀለሞች: #0C7C59 ለCTA፣ #111 ለጽሑፍ፣ #F4F7F6 ዳራ። ንፅፅሩን AA አድርግ።”
- በመስተጋብር የተገደበ: “በአዝራሮች ላይ ረቂቅ ማንዣበብን ጨምር (ሚዛን 1.02, 120ms ቀላል)። ምንም አኒሜሽን ቅልመት የለም። ተለጣፊ ራስጌ በ60px ጥቅልል ላይ ቀስቅስ።”
- ተደራሽነትን የሚያውቅ: “ለዳሰሳ የARIA ሚናዎችን፣ የ alt የጽሑፍ ጥቆማዎችን፣ ወደ ይዘት አገናኝ ዝለል፣ የትኩረት ግዛቶችን ከ3፡1 ንፅፅር ጋር አካትት።”
- በአፈጻጸም የሚያውቅ: “ወሳኝ CSSን አስገባ፣ አስፈላጊ ያልሆነ JSን ለሌላ ጊዜ አስተላልፍ፣ የጀግና ምስልን ጨመቅ፣ ከታች በታች ያሉትን ምስሎች በስንፍና ጫን።”
- የድጋሚ ጽሑፍ ዑደት: “የመስመር-ርዝመቱን ለተነባቢነት ወደ 70 ቻር ያሳንሱ። በዴስክቶፕ ላይ የርዕሱን የቅርጸ ቁምፊ መጠን ይጨምሩ። ቀጥ ያለውን ዜማ አጥብቁ።”
ከረቂቅ ወደ ማዕቀፍ: <Gemini> ዘመናዊ ቁልሎችን መጠቀም
በ “AI-የተፈጠረ ገጽ” እና “ፕሮፌሽናል የኮድ መሰረት” መካከል መምረጥ የለብዎትም። <Gemini> የእርስዎን ቁልል እንዲያነጣጠር ይጠይቁት:
- React: “ለርዕስ፣ ለንዑስ ርዕስ፣ ለምስል፣ ለCTA መለያ ባህሪያት ያለው ተግባራዊ አካል ይፍጠሩ። የCSS ሞጁሎችን ተጠቀም። በተንቀሳቃሽ ስልክ ላይ የተመሰረቱ የመላመጃ ነጥቦች።”
- Next.js: “ሜታዳታ፣ በአገልጋይ-ጎን ባህሪያት ቦታ ያዥዎች እና ተደራሽ ዳሰሳ ያለው ገጽ ይፍጠሩ። ለተመቻቸ የምስል አካልን ተጠቀም።”
- Tailwind: “ለቦታ አቀማመጥ እና ለፊደል አጻጻፍ የTailwind ክፍሎችን ተጠቀም። ለሆቨር ግዛቶች እና ለጨለማ ሁነታ የመገልገያ ልዩነቶችን ይግለጹ።”
- Vue/Svelte: “የጀግና እና ባህሪያትን አካል አድርጉ፤ ለተለዋዋጭ ይዘት ባህሪያትን ይፋ አድርጉ፤ ዓለም አቀፍ CSSን አስወግዱ።”
ከዚያ የንግድ ልውውጦችን እንዲያብራራ ያድርጉት-የመገልገያ ክፍሎች ከ CSS ሞጁሎች ጋር, SSR ከ CSR ጋር, እና የማያስፈልጉዎትን 400kb ቅጦች ከመላክ እንዴት እንደሚቆጠቡ።
ተደራሽነት እና አፈጻጸም: <Gemini> የሚረዳባቸው ድርድሮች የሌሉ
ጣቢያዎ ሁሉን አቀፍ እና ፈጣን መሆን አለበት። <Gemini> ይጠይቁ:
- በምስል ይዘት እና አውድ ላይ በመመስረት የ alt የጽሑፍ ጥቆማዎችን ያቅርቡ።
- የትኩረት የሚታይ ዝርዝር እና የቁልፍ ሰሌዳ አሰሳ ፍሰቶችን ጨምር።
- የቀለም ንፅፅርን ያረጋግጡ እና ለርዕሶች እና አዝራሮች አማራጮችን ያቅርቡ።
- ንብረቶችን ያመቻቹ: ምላሽ ሰጪ ምስሎች, የ SVG አዶዎች, ወሳኝ ቅርጸ ቁምፊዎችን አስቀድሞ መጫን.
- የCLS (የተከማቸ የአቀማመጥ ለውጥ) የምስል ልኬቶችን በመግለጽ ይቀንሱ።
Lighthouseን አይተካውም፣ ነገር ግን ስለ 0.8s የአቀማመጥ ለውጥዎ መጥፎ ስሜት እንዲሰማዎት የማያደርግ ትንሽ ኦዲተር እንዳለዎት ነው።
የይዘት ስትራቴጂ: አዎ, ቃላቱ አስፈላጊ ናቸው
<Gemini> በቅጂ መብት ሊረዳ ይችላል፣ ነገር ግን ድምጽዎን ይስጡት። ያቅርቡ:
- የቃና መመሪያ: ወዳጃዊ, ቀጥተኛ ንግግር, ግልጽ.
- የመልእክት መላላኪያ ተዋረድ: ርዕስ, ንዑስ ርዕስ, ጥቅሞች, ማረጋገጫ, CTA.
- የሚወዱትን ምሳሌዎች—እና የማይወዱትን (“ምንም ቃላቶች፣ ምንም ‘ሲነርጂ’”)።
ከዚያ ይድገሙት። የበለጠ ኃይለኛ ርዕሶችን ይጠይቁ። የCTA ሶስት ስሪቶችን ይሞክሩ። ገጹን ሰብዓዊ ያድርጉት።
የንድፍ ስርዓቶች: አዝራሩን በየጊዜው እንደገና አታስጀምሩ
ብዙ ገጾችን እየገነቡ ከሆነ <Gemini>:
- የቦታዎን ሚዛን፣ የቅርጸ ቁምፊ መጠኖች እና የቀለም ምልክቶችን ይመዝግቡ።
- ክፍሎችን አካል ያድርጉ: ጀግና፣ የባህሪ ካርድ፣ የምስክርነት፣ የዋጋ አሰጣጥ።
- የአጠቃቀም ማስታወሻዎችን ያቅርቡ (“የካርድ ርዕሶች H3፣ 24px ዴስክቶፕ፣ 20px ሞባይል መሆን አለባቸው”)።
- ለውስጣዊ ማጣቀሻ የቅጥ መመሪያ ገጽ ይፍጠሩ።
ትንሽ የቅድሚያ የስርዓት ስራ በኋላ ላይ ከ CSS ምት-አ-ሞለ ያድነዎታል።
ፈጣን ድሎች እና ብልጥ አደጋዎች
ፈጣን ድሎች:
- የፕሮቶታይፕ ፍጥነት: በአንድ ደቂቃ ውስጥ አዲስ አቀማመጥ መፍጠር.
- ተደራሽነት መነሻ መስመር: ተጨማሪ ጥረት ሳያስፈልግ የትርጓሜ መዋቅር።
- ንጹህ ስካፎልዲንግ: ወደ ማከማቻዎ ውስጥ መጣል የሚችሏቸው ክፍሎች።
ጉድጓዶች:
- በነባሪዎች ላይ ከመጠን በላይ ጥገኛ መሆን: አሁንም ክፍተትን እና አይነትን ማስተካከል ያስፈልግዎታል።
- ሁሉም-በአንድ-አንድ አኒሜሽን: ከምርት ስም ስብዕና ጋር እንዲመሳሰል ያስተካክሉ።
- QAን ችላ ማለት: በእውነተኛ መሳሪያዎች ላይ ይሞክሩ; AI የእርስዎን iPhone የመመልከቻ ወደብ እንግዳነት አይይዝም።
የሰዎች ዲዛይነሮችን እና ገንቢዎችን መቼ ማምጣት አለባቸው (ጠቁም: ብዙ ጊዜ)
<Gemini> በመጀመሪያ ረቂቆች እና ፈጣን ጥገናዎች ላይ በጣም ጥሩ ነው, ነገር ግን ሰዎች:
- ለአንድ ታሪክ የንድፍ ህጎችን መቼ እንደሚጥሱ ይወቁ።
- የአፈጻጸም መጠን ሲጨምር ጤናማ ያድርጉ።
- ጣዕምን አምጡ። በይነመረብ ትንሽ ተጨማሪ መጠቀም ይችላል።
<Gemini> ከባድ ማንሳትን እንዲያከናውን እና ቡድንዎን በልዩ ሾርባው ላይ እንዲያተኩር ይጠቀሙበት።
መቅዳት እና መለጠፍ የሚችሉት ምቹ ምሳሌ ጥያቄ
“ለአምራችነት መተግበሪያ ምላሽ ሰጪ የማረፊያ ገጽ ይገንቡ። ክፍሎች: ተለጣፊ ራስጌ በአርማ እና በዳሰሳ; ጀግና ከርዕስ፣ ከንዑስ ርዕስ፣ ከኢሜል ቀረጻ ቅጽ እና ምሳሌ ጋር; የባህሪ ፍርግርግ ከሶስት ካርዶች ጋር (አዶ፣ ርዕስ፣ መግለጫ); የምስክርነት ተንሸራታች; CTA ባነር; ግርጌ ከአገናኞች እና ከማህበራዊ አዶዎች ጋር። የትርጓሜ HTML5፣ CSS ፍርግርግ ለአቀማመጥ፣ Flexbox ለአሰላለፍ ተጠቀም። የቀለም ቤተ-ስዕል: #0C7C59 (ዋና), #111 (ጽሑፍ), #F4F7F6 (ዳራ). የፊደል አጻጻፍ: ለርዕሶች Inter, ለሰውነት የስርዓት UI. ተደራሽነት: WCAG AA ንፅፅር, ትኩረት የሚታዩ ግዛቶች, ARIA ሚናዎች, የ alt ጽሑፍ ጥቆማዎች. አፈጻጸም: መስመር ላይ ወሳኝ CSS, ስንፍና-ጭነት ምስሎች, የተጨመቀ ጀግና. መስተጋብሮች: ገር የሆነ ቁልፍ መንሳፈፍ (ሚዛን 1.02, 120ms), ካርድ ላይ ማንሳት/ማተኮር, ተለጣፊ ራስጌ ከ 60px ጥቅልል በኋላ. የኮድ አስተያየቶችን እና የአስተያየት ውሳኔዎችን አጭር ማብራሪያ ያቅርቡ።”
ይህን ያሂዱ, ከዚያ ይድገሙት: “በዴስክቶፕ ላይ የጀግናውን ርዕስ መጠን ይጨምሩ, በተንቀሳቃሽ ስልክ ላይ ያለውን የካርድ መሙያ ይቀንሱ, የCTA ባነርን ትንሽ ጠቆር ያለ ያድርጉት።” ቮይላ—በካፌይን IV ያለ ትክክለኛ እድገት።
ልብ ሊባል የሚገባው: <Gemini> 3.0 Pro ከSider.AI ጎን ለጎን መጠቀም
ጭንቅላት ወደ ላይ: ያለማቋረጥ አውድ ከቀየሩ—ምሳሌዎችን መመርመር፣ ቅጂ ማዘጋጀት፣ የኮድ ቁርጥራጮችን ማረጋገጥ—Sider.AI’s የጎን አሞሌ የስራ ፍሰትዎን በማንኛውም የድረ ገጽ ላይ ሊያወሳስበው ይችላል። በአሳሽዎ ውስጥ የሚኖር ብልጥ፣ ጨዋ ፕሮጀክት አስተዳዳሪ እንዳለዎት ነው። ጥያቄዎችን ማዘጋጀት፣ ድግግሞሾችን ማወዳደር እና ሁሉንም ነገር በአንድ እይታ ማስቀመጥ ይችላሉ፣ ይህም ማለት ጥቂት “እሺ፣ CSSን የት ነው ያደረግኩት?” የሚሉ አፍታዎች አሉ። የድር ዲዛይን ሂደትዎ በአስር ትሮች ውስጥ የሚከሰት ከሆነ (በእርግጥ ነው)፣ ይህ ጥምረት በተግባር አሞሌዎ ላይ ከመንጎራደድ ይልቅ እንዲንቀሳቀሱ ያደርግዎታል። ማጠቃለያው: <Gemini> የእርስዎን ረቂቅ ማሽን ያድርጉት, የመጨረሻ አለቃዎ አይደለም
<Gemini> 3.0 Pro ከ “ሃሳብ” ወደ “ተግባራዊ ረቂቅ” በፍጥነት ለማድረስ በጣም ጥሩ ነው። ለሚከተሉት ይጠቀሙበት:
- እውነተኛ ኮድ ያላቸው አቀማመጦችን ንድፍ።
- ከመጀመሪያው ጀምሮ ተደራሽነት እና የአፈጻጸም ግምትዎችን አስገቡ።
- ቀንዎን ሙሉ በሙሉ ሳያበላሹ በምስሎች እና ቅጂዎች ላይ ይድገሙ።
ግን መመዘኛዎችዎን ይጠብቁ። እርስዎ—እና የምርት ስምዎ—ጣዕሙን፣ ልዩነቱን እና የመጨረሻውን 10% ብርሃን “አንድ ገጽ” ወደ “ገጹ” የሚቀይር ያመጣሉ። <Gemini> እንደ ኃይል መሣሪያዎ አድርገው ያስቡ። አሁንም ስዕሉን ይመርጣሉ።
አሁን ያንን ዲቪን ማእከል ያድርጉት። በጥቂት እንባዎች።
FAQ
Q1: <Gemini> 3.0 Pro አንድ ሙሉ ድህረ ገጽ ወይም አንድ ገጽ ብቻ መንደፍ ይችላል?
በአንድ ገጽ ስካፎልዶች እና ፈጣን ፕሮቶታይፖች ላይ በጣም ጠንካራ ነው፣ ነገር ግን ለብዙ ገጽ ጣቢያዎች እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ክፍሎችን ለመግለጽ ሊረዳ ይችላል። ስርዓትዎን—ራስጌዎችን፣ ካርዶችን፣ ግርጌዎችን—ለመንደፍ ይጠቀሙበት፣ ከዚያ በማዕቀፍዎ ውስጥ አንድ ላይ ያጣምሩ።
Q2: <Gemini> 3.0 Pro ለማምረት ዝግጁ የሆነ HTML/CSS ያመነጫል?
ጠንካራ መነሻ ነጥብ የሆነ ንጹህ፣ የትርጓሜ ኮድ ያመነጫል። በተለይም ከ React፣ Next.js ወይም Tailwind ጋር እየተዋሃዱ ከሆነ አሁንም ክፍተትን፣ የተደራሽነት ዝርዝሮችን እና አፈጻጸምን ለማምረት ማሻሻል ይፈልጋሉ።
Q3: AI-የተፈጠሩ አቀማመጦችን ሲጠቀሙ የምርት ስም ወጥነትን እንዴት መጠበቅ እችላለሁ?
ግልጽ የሆነ የቃና እና የቅጥ መመሪያ—ቅርጸ ቁምፊዎች፣ ቀለሞች፣ ክፍተት—ያቅርቡ እና <Gemini> ክፍሎችን ከአስተያየቶች ጋር እንዲያካትት ይጠይቁት። ከዚያ የንድፍ ስርዓት አቀራረብን ይጠቀሙ ስለዚህ ለውጦች CSS ምት-አ-ሞል ሳይኖር በገጾች ላይ ይተገበራሉ።
Q4: <Gemini> በተደራሽነት እና በአፈጻጸም ሊረዳ ይችላል?
አዎ—ለWCAG AA ንፅፅር፣ ለARIA ሚናዎች፣ ለትኩረት የሚታዩ ግዛቶች እና እንደ ወሳኝ CSS መስመር ላይ ማስገባት እና ምስሎችን በስንፍና መጫን ያሉ የአፈጻጸም ምክሮችን ይጠይቁ። የመጨረሻ ኦዲትን አይተካም፣ ነገር ግን የመነሻ መስመሩን በፍጥነት ያሳድጋል።
Q5: <Gemini> ከሌሎች እንደ Sider.AI ያሉ መሳሪያዎች ጋር መጠቀም አለብኝ?
ጥያቄዎችን፣ ኮድን እና ምሳሌዎችን በተለያዩ ትሮች ላይ ከቀያየሩ፣ <Gemini>ን ከብልጥ የጎን አሞሌ ጋር ማጣመር ሁሉንም ነገር በሥርዓት እንዲይዝ ያግዛል። ድግግሞሽን ያፋጥናል እና አስፈሪውን ለምን-ይህ-ቁልፍ-በግራ-በኩል የሚንሳፈፍ ሁኔታን ይቀንሳል። 
