القائمة
AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
AI-powered fashion visualization and virtual try-on toolkit for consent-based garment editing and creative design workflows
Transform Markdown into paste-ready WeChat Official Account HTML with 6 themes, auto-numbering, keyword highlighting, and compliance validation
Recognizes and warns against piracy/crack tools disguised as legitimate software
Analyze and identify piracy/crack distribution repositories disguised as legitimate software tools
Analyze and understand software activation mechanisms and digital licensing patterns for educational purposes
Unlock and configure Marvelous Designer 13 for 3D garment simulation with API-driven cloth dynamics
| name | aipixelperfect-design-generator |
| description | AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration |
| triggers | ["generate AI design with AiPixelPerfect","create professional graphics using AI image generator","synthesize images from text prompts","use AiPixelPerfect for design work","integrate AI design generation into workflow","export AI-generated designs to design tools","configure AiPixelPerfect image synthesis","troubleshoot AI design generation issues"] |
Skill by ara.so — Design Skills collection.
AiPixelPerfect is an AI-powered design synthesis engine that generates professional-quality images from text prompts. It features a responsive web interface, multilingual support, real-time collaboration tools, and export integrations with popular design platforms like Figma, Adobe Creative Cloud, and Canva.
# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/
# Clone the repository
git clone https://github.com/abnormal-codex/Ai-Pixel-Design-Archive.git
cd Ai-Pixel-Design-Archive
# Install dependencies (Next.js based)
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration
# .env.local
NEXT_PUBLIC_API_ENDPOINT=https://api.aipixelperfect.com
NEURAL_BACKEND_URL=https://synthesis.aipixelperfect.com
WEBSOCKET_SERVER=wss://collab.aipixelperfect.com
API_KEY=${AIPIXELPERFECT_API_KEY}
MAX_RESOLUTION=8192
DEFAULT_VARIATIONS=4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AiPixelPerfect Design Generator</title>
<link rel="stylesheet" href="styles/aipixel.css">
</head>
<body>
<div id="synthesis-canvas">
<div class="prompt-container">
<textarea
id="design-prompt"
placeholder="Describe your design vision..."
rows="3"
></textarea>
<button id="synthesize-btn" onclick="generateDesign()">
Synthesize
</button>
</div>
<div id="variations-grid" class="hidden">
<!-- Generated variations appear here -->
</div>
<div id="refinement-panel" class="hidden">
<label>Brightness:
<input type="range" id="brightness" min="0" max="200" value="100">
</label>
<label>Contrast:
<input type="range" id="contrast" min="0" max="200" value="100">
</label>
<label>Saturation:
<input type="range" id="saturation" min="0" max="200" value="100">
</label>
<label>Style Weight:
<input type="range" id="style-weight" min="0" max="100" value="50">
</label>
<button onclick="applyRefinements()">Apply Changes</button>
</div>
</div>
<script src="scripts/aipixel-core.js"></script>
</body>
</html>
// scripts/aipixel-core.js
const AiPixelPerfect = {
apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
currentDesign: null,
// Generate design from prompt
async generateDesign(prompt, options = {}) {
const response = await fetch(`${this.apiEndpoint}/synthesize`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
prompt: prompt,
variations: options.variations || 4,
resolution: options.resolution || 2048,
style_weight: options.styleWeight || 0.5,
language: options.language || 'en'
})
});
if (!response.ok) {
throw new Error(`Synthesis failed: ${response.statusText}`);
}
const data = await response.json();
return data.variations;
},
// Refine selected design
async refineDesign(designId, adjustments) {
const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
brightness: adjustments.brightness,
contrast: adjustments.contrast,
saturation: adjustments.saturation,
style_weight: adjustments.styleWeight
})
});
return await response.json();
},
// Export to external platform
async exportDesign(designId, platform, options = {}) {
const response = await fetch(`${this.apiEndpoint}/export/${designId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
platform: platform, // 'figma', 'adobe', 'canva'
format: options.format || 'png',
maintain_layers: options.maintainLayers || false,
target_project: options.targetProject || null
})
});
return await response.json();
}
};
// Example usage in UI
async function generateDesign() {
const prompt = document.getElementById('design-prompt').value;
const variationsGrid = document.getElementById('variations-grid');
try {
const variations = await AiPixelPerfect.generateDesign(prompt, {
variations: 4,
resolution: 2048
});
variationsGrid.innerHTML = '';
variations.forEach((variation, index) => {
const img = document.createElement('img');
img.src = variation.url;
img.alt = `Variation ${index + 1}`;
img.onclick = () => selectVariation(variation.id);
variationsGrid.appendChild(img);
});
variationsGrid.classList.remove('hidden');
} catch (error) {
console.error('Generation failed:', error);
alert('Failed to generate design. Please try again.');
}
}
function selectVariation(variationId) {
AiPixelPerfect.currentDesign = variationId;
document.getElementById('refinement-panel').classList.remove('hidden');
}
async function applyRefinements() {
const adjustments = {
brightness: document.getElementById('brightness').value / 100,
contrast: document.getElementById('contrast').value / 100,
saturation: document.getElementById('saturation').value / 100,
styleWeight: document.getElementById('style-weight').value / 100
};
const refined = await AiPixelPerfect.refineDesign(
AiPixelPerfect.currentDesign,
adjustments
);
// Update preview with refined image
console.log('Refined design:', refined.url);
}
// api/aipixel-client.js
class AiPixelPerfectClient {
constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') {
this.apiKey = apiKey;
this.baseUrl = baseUrl;
}
async request(endpoint, method = 'GET', body = null) {
const options = {
method,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
}
};
if (body) {
options.body = JSON.stringify(body);
}
const response = await fetch(`${this.baseUrl}${endpoint}`, options);
if (!response.ok) {
const error = await response.json();
throw new Error(error.message || 'API request failed');
}
return await response.json();
}
// Generate designs from prompt
async synthesize(prompt, options = {}) {
return await this.request('/synthesize', 'POST', {
prompt,
variations: options.variations || 4,
resolution: options.resolution || 2048,
style_weight: options.styleWeight || 0.5,
language: options.language || 'en',
seed: options.seed || null
});
}
// Get design status
async getDesignStatus(designId) {
return await this.request(`/designs/${designId}`);
}
// Download design
async downloadDesign(designId, format = 'png') {
const response = await fetch(
`${this.baseUrl}/designs/${designId}/download?format=${format}`,
{
headers: {
'Authorization': `Bearer ${this.apiKey}`
}
}
);
return await response.blob();
}
// Create custom style
async createStyle(name, referenceImages, options = {}) {
const formData = new FormData();
formData.append('name', name);
formData.append('description', options.description || '');
referenceImages.forEach((image, index) => {
formData.append(`reference_${index}`, image);
});
const response = await fetch(`${this.baseUrl}/styles`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.apiKey}`
},
body: formData
});
return await response.json();
}
// List available styles
async listStyles() {
return await this.request('/styles');
}
}
// Usage example
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
async function generateAndExport() {
const result = await client.synthesize(
'minimalist logo for tech startup, blue and white color scheme',
{
variations: 4,
resolution: 4096,
styleWeight: 0.7
}
);
console.log('Generated designs:', result.variations);
// Download the first variation
const blob = await client.downloadDesign(result.variations[0].id, 'png');
const url = URL.createObjectURL(blob);
console.log('Download URL:', url);
}
// collaboration/annotations.js
class DesignAnnotation {
constructor(websocketUrl, designId) {
this.ws = new WebSocket(websocketUrl);
this.designId = designId;
this.annotations = [];
this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
this.handleAnnotation(data);
};
}
// Add annotation to design
addAnnotation(x, y, radius, comment, type = 'circle') {
const annotation = {
design_id: this.designId,
type: type,
position: { x, y },
radius: radius,
comment: comment,
timestamp: Date.now(),
author: process.env.USER_ID
};
this.ws.send(JSON.stringify({
action: 'add_annotation',
data: annotation
}));
return annotation;
}
// Handle incoming annotations
handleAnnotation(data) {
if (data.action === 'annotation_added') {
this.annotations.push(data.annotation);
this.renderAnnotation(data.annotation);
}
}
// Render annotation on canvas
renderAnnotation(annotation) {
const canvas = document.getElementById('annotation-canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(
annotation.position.x,
annotation.position.y,
annotation.radius,
0,
2 * Math.PI
);
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.stroke();
// Add comment tooltip
const tooltip = document.createElement('div');
tooltip.className = 'annotation-tooltip';
tooltip.style.left = `${annotation.position.x}px`;
tooltip.style.top = `${annotation.position.y - 30}px`;
tooltip.textContent = annotation.comment;
document.body.appendChild(tooltip);
}
// Submit design for review
async submitForReview(reviewers) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
design_id: this.designId,
reviewers: reviewers,
annotations: this.annotations
})
}
);
return await response.json();
}
}
async function batchGenerate(prompts, baseOptions = {}) {
const results = [];
for (const prompt of prompts) {
try {
const variations = await AiPixelPerfect.generateDesign(prompt, {
...baseOptions,
variations: 1 // Single variation per prompt for efficiency
});
results.push({
prompt: prompt,
design: variations[0],
status: 'success'
});
} catch (error) {
results.push({
prompt: prompt,
design: null,
status: 'failed',
error: error.message
});
}
// Rate limiting: wait 1 second between requests
await new Promise(resolve => setTimeout(resolve, 1000));
}
return results;
}
// Usage
const prompts = [
'modern website hero image with gradient background',
'product photography of smartwatch on wooden table',
'abstract geometric pattern for textile design'
];
const designs = await batchGenerate(prompts, { resolution: 2048 });
async function applyCustomStyle(prompt, styleId, options = {}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
prompt: prompt,
style_id: styleId,
style_strength: options.styleStrength || 0.75,
resolution: options.resolution || 2048,
preserve_structure: options.preserveStructure || true
})
}
);
return await response.json();
}
// Create and apply custom brand style
async function createBrandStyle(brandName, referenceFiles) {
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
// Create style from brand assets
const style = await client.createStyle(
`${brandName}-brand-style`,
referenceFiles,
{ description: `Official brand style for ${brandName}` }
);
// Generate designs using the brand style
const designs = await applyCustomStyle(
'social media banner for product launch',
style.id,
{ styleStrength: 0.8 }
);
return designs;
}
async function progressiveRefine(initialPrompt, iterations = 3) {
let currentPrompt = initialPrompt;
let bestDesign = null;
for (let i = 0; i < iterations; i++) {
const variations = await AiPixelPerfect.generateDesign(currentPrompt, {
variations: 4,
seed: i * 1000 // Different seed each iteration
});
// Simulate selection (in real app, user would choose)
bestDesign = variations[0];
// Refine prompt based on result
currentPrompt = await enhancePrompt(currentPrompt, bestDesign);
console.log(`Iteration ${i + 1}: ${currentPrompt}`);
}
return bestDesign;
}
async function enhancePrompt(originalPrompt, designResult) {
// Use AI to suggest prompt improvements
// In practice, this would call a prompt enhancement endpoint
return `${originalPrompt}, enhanced details, professional quality`;
}
async function exportToFigma(designId, figmaFileKey, nodeId = null) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
platform: 'figma',
target_file: figmaFileKey,
target_node: nodeId,
figma_token: process.env.FIGMA_ACCESS_TOKEN,
format: 'png',
scale: 2
})
}
);
const result = await response.json();
return result.figma_url;
}
async function exportToAdobe(designId, adobeProjectId) {
const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd');
const formData = new FormData();
formData.append('file', blob, 'design.psd');
formData.append('project_id', adobeProjectId);
const response = await fetch(
'https://api.adobe.io/cc/storage/upload',
{
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`,
'x-api-key': process.env.ADOBE_API_KEY
},
body: formData
}
);
return await response.json();
}
Issue: Synthesis times out after 30 seconds
// Solution: Use async status polling for complex prompts
async function synthesizeWithPolling(prompt, options = {}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({ prompt, ...options })
}
);
const { job_id } = await response.json();
// Poll for completion
while (true) {
const status = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`,
{
headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
}
);
const data = await status.json();
if (data.status === 'completed') {
return data.result;
} else if (data.status === 'failed') {
throw new Error(data.error);
}
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
Issue: Generated designs don't match prompt expectations
// Solution: Use detailed, structured prompts
function buildStructuredPrompt(subject, style, lighting, mood, details = []) {
return [
`Subject: ${subject}`,
`Style: ${style}`,
`Lighting: ${lighting}`,
`Mood: ${mood}`,
details.length > 0 ? `Details: ${details.join(', ')}` : ''
].filter(Boolean).join(' | ');
}
const prompt = buildStructuredPrompt(
'corporate office interior',
'modern minimalist',
'natural daylight from large windows',
'professional and welcoming',
['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']
);
Issue: Copyright conflict warnings on prompt
// Solution: Check prompt before synthesis
async function validatePrompt(prompt) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({ prompt })
}
);
const result = await response.json();
if (result.conflicts && result.conflicts.length > 0) {
console.warn('Potential copyright conflicts:', result.conflicts);
console.log('Suggested alternatives:', result.alternatives);
return false;
}
return true;
}
// Use before generation
const isValid = await validatePrompt('logo similar to Nike swoosh');
if (!isValid) {
console.error('Prompt may infringe on existing IP');
}
Issue: Multilingual prompts not generating culturally appropriate designs
// Solution: Explicitly set language and cultural context
async function generateWithCulturalContext(prompt, language, region) {
return await AiPixelPerfect.generateDesign(prompt, {
language: language,
cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc.
respect_local_aesthetics: true
});
}
// Example: Japanese design
const jpDesign = await generateWithCulturalContext(
'伝統的な日本の庭園',
'ja',
'japan'
);
class DesignCache {
constructor() {
this.cache = new Map();
this.maxSize = 50;
}
getCacheKey(prompt, options) {
return `${prompt}-${JSON.stringify(options)}`;
}
async getCached(prompt, options) {
const key = this.getCacheKey(prompt, options);
if (this.cache.has(key)) {
const cached = this.cache.get(key);
if (Date.now() - cached.timestamp < 3600000) { // 1 hour
return cached.data;
}
}
return null;
}
setCached(prompt, options, data) {
const key = this.getCacheKey(prompt, options);
if (this.cache.size >= this.maxSize) {
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
this.cache.set(key, {
data: data,
timestamp: Date.now()
});
}
}
const designCache = new DesignCache();
async function generateWithCache(prompt, options) {
const cached = await designCache.getCached(prompt, options);
if (cached) {
console.log('Returning cached design');
return cached;
}
const result = await AiPixelPerfect.generateDesign(prompt, options);
designCache.setCached(prompt, options, result);
return result;
}
512: Quick preview (draft quality)1024: Standard web graphics2048: High-quality prints and presentations4096: Professional photography replacement8192: Large format prints and billboards0.0 - 0.3: Subtle style influence, prompt-dominant0.4 - 0.6: Balanced style and prompt0.7 - 1.0: Strong style application, may override prompt detailsUse ISO 639-1 codes: en, es, fr, de, ja, zh, ar, hi, pt, ru, etc.